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或800px。它跨越右端。我检查了mozilla和chrome两者。我正在为我的ec2亚马逊实例测试它。

同样我的css按钮：

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

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

有人可以告诉我可以在点击事件中实现的效果。我尝试使用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点击事件。这可以通过简单的checkbox来实现。

以下是展示它的链接：

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

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

修改

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

修改

此外，如果您想要更改单击的元素，您需要将复选框放在
之前
以下是两者的小提琴演示：

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

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

1 个答案: