css - 将固定宽度调整为 div 并在 css 按钮单击上创建效果

Question

我使用了页面上带有滚动条的 div 事件来显示内容。 虽然我调整了 div 的宽度, 当它出现在页面上时；它到达屏幕的右上角。

代码:

<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">  

高度得到正确调整，无论我采用什么宽度，即 200,300 或 800 像素。它跨越右端。 我检查了 mozilla 和 chrome。我正在为我的 ec2 亚马逊实例测试它。

类似我的 css 按钮:

<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >

当我点击它时，所有的 Action 都正确执行，但它没有显示任何效果，因此用户可以意识到按钮是否被点击。

谁能告诉我点击事件可以实现的效果。我尝试在 google 上使用 css 按钮点击效果并测试了其中的一些。但没有任何区别。

这里是 css:

.uibutton,
.uibutton:visited {
    position: relative;
    z-index: 1;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 0.8em 0.5em;
    border: 1px solid #999;
    border-bottom-color: #888;
    margin: 0;
    text-decoration: none;
    text-align: center;
    font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    /* outline: none; */
    color: #333;
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
    background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: linear-gradient(#f5f6f6, #e4e4e3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.uibutton:hover,
.uibutton:focus,
.uibutton:active {
    border-color: #777 #777 #666;
}

.uibutton:active {
    border-color: #aaa;
    background: #ddd;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
    padding: 2.0px;
    border: 0;
}

.uibutton.large {
    font-size: 16px;
}

/* ............................................................................................................. Submit, etc */

.uibutton.confirm {
    border-color: #29447e #29447e #1a356e;
    color: #fff;
    background-color: #5B74A8;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
    background-image: -moz-linear-gradient(#637bad, #5872a7);
    background-image: -o-linear-gradient(#637bad, #5872a7);
    background-image: linear-gradient(#637bad, #5872a7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}

.uibutton.confirm:active {
    border-color: #29447E;
    background: #4F6AA3;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Answer 1

听起来很像你需要 css 点击事件。这可以通过一个简单的复选框来实现。

这是一个演示它的链接:

http://tympanus.net/Tutorials/CSSClickEvents/index.html

http://jsfiddle.net/Hive7/gd7AJ/

编辑

要执行当前元素，请将 css 效果类赋予当前元素

编辑

此外，如果你想改变点击的元素，你需要在前面加上复选框

这是两者的 fiddle 演示:

http://jsfiddle.net/Hive7/gd7AJ/1/