隐藏滚动条的狮子/山狮的CSS悬停bug

CSS hover bug on Lion/Mountain Lion with hidden scrollbars

本文关键字：CSS 悬停 bug 滚动条 隐藏      更新时间：2023-09-26

我有一个列表，当您将鼠标悬停在每个列表项上时，按钮显示在其中。该按钮位于每个列表项的右边缘。当列表不需要滚动时，它工作得很好，但当需要在Safari中隐藏滚动条的Lion/Mountain Lion上滚动时，它就不能正常工作了。当鼠标位于隐藏的滚动条区域上时，似乎底层项目的CSS悬停状态被删除了，因此按钮消失了。

我在这里重现了这个问题:

http://jsfiddle.net/upsT3/

有谁知道这个问题的解决方案/解决方案吗?

标记:

<div id="list1" class="list">
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
</div>
<br />
<br />
<div id="list2" class="list">
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>   
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div>
    <div>Foo<button>a</button></div> 
</div>
CSS: 

.list {
    height: 200px;
    width: 300px;
    border: 1px solid gray;
    overflow: auto;
}
.list div {
    padding: 5px 0px 5px 5px;
    border-bottom: 1px solid #eee;
}
.list div:hover {
    background: #eee;
}
.list button {
    float: right;
    display: none;    
}
.list div:hover button {
    display: block;
}

将position: relative;添加到.list似乎可以摆脱Safari中的悬停问题，但点击问题仍然存在。

http://jsfiddle.net/zZWPq/

奇怪的是，包含div的注册点击，而button没有。完全隐藏滚动条当然可以解决这个问题，但这是糟糕的用户体验，强烈反对，真的不应该被视为一种选择。如果我发现了别的东西，我会回来报告的。

相关文章：