CSS при наведении мыши на Lion/Mountain Lion со скрытыми полосами прокрутки
У меня есть список, где кнопка появляется внутри каждого элемента списка, когда вы наводите курсор на него. Кнопка находится на правом краю каждого элемента списка. Это прекрасно работает, когда список не нуждается в прокрутке, но не работает должным образом, когда необходима прокрутка на Lion / Mountain Lion в Safari со скрытыми полосами прокрутки. Кажется, что состояние наведения 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;
}
1 ответ
Добавление position: relative;
в .list
кажется, избавляется от проблемы с парением в Safari, но проблема с щелчками сохраняется.
Как ни странно, содержащий div
регистрирует щелчок, пока button
не. Полное скрытие полосы прокрутки, конечно, избавит от проблемы, но это плохой UX, настоятельно не рекомендуется и, действительно, не должно рассматриваться как вариант. Отзовусь, если найду что-то еще.