J'ai une liste où un bouton apparaît à l'intérieur de chaque élément de la liste lorsque vous passez la souris dessus. Le bouton est sur le bord droit de chaque élément de la liste. Cela fonctionne correctement lorsque la liste n'a pas besoin de défiler, mais cela ne fonctionne pas correctement lorsque vous avez besoin de faire défiler Lion/Mountain Lion dans Safari avec des barres de défilement cachées. Il semble que l'état CSS hover de l'élément sous-jacent est supprimé lorsque la souris se trouve sur la zone de la barre de défilement masquée, ce qui fait que le bouton disparaît.Insecte hover CSS sur Lion/Mountain Lion avec barres de défilement cachées
J'ai reproduit ici le problème:
Est-ce que quelqu'un sait d'une solution/solution pour cela?
Markup:
<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;
}
Je dois noter que le code ci-dessus reproduit le problème le mieux sur Safari. Dans Chrome, le bouton reste visible mais il n'est toujours pas cliquable lorsque la souris se trouve sur la zone de la barre de défilement. – Erik