我有一个列表,当您将鼠标悬停在每个列表项上时,按钮会显示在该列表中.该按钮位于每个列表项的右边缘.当列表不需要滚动时,这可以正常工作,但在Safari中具有隐藏滚动条的Lion / Mountain Lion上需要滚动时,它无法正常工作.当鼠标悬停在隐藏的滚动条区域上时,似乎删除了基础项目的CSS悬停状态,因此按钮消失.
我在这里重现了这个问题:
有谁知道解决方案/解决方法吗?
标记:
<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;
}
最佳答案 添加位置:相对; to .list似乎摆脱了Safari中的悬停问题,但点击问题仍然存在.
奇怪的是,包含div会记录点击,而按钮则不会.完全隐藏滚动条当然会解决问题,但这是糟糕的用户体验,强烈气馁,真的不应该被视为一种选择.如果我找到别的东西,会报告回来.