1

我使用了页面上带有滚动条的 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()" >

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

谁能告诉我点击事件可以实现的效果。我在 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;
}
4

1 回答 1

1

听起来很像您需要css点击事件。这可以通过一个简单的checkbox.

这是一个演示它的链接：

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

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

编辑

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

编辑

此外，如果要更改单击的元素，则需要在前面放置复选框

这是两者的小提琴演示：

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

于 2013-09-29T09:44:21.757 回答