2013-03-26 1 views
4

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:

http://jsfiddle.net/upsT3/

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; 
} 
+0

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

Répondre

2

Ajout position: relative;-.list semble se débarrasser du problème de vol stationnaire dans Safari, mais la question de clic persiste.

http://jsfiddle.net/zZWPq/

Étrangement, les contenant div enregistre le clic, alors que button ne fonctionne pas. Cacher la barre de défilement éliminerait bien sûr le problème, mais c'est un mauvais UX, fortement déconseillé et ne devrait vraiment pas être considéré comme une option. Je rapporterai si je trouve quelque chose d'autre.

+0

Pour l'instant, j'ai travaillé autour de lui en utilisant un style de barre de défilement personnalisé pour webkit afin qu'il oblige les barres de défilement à apparaître. – Erik

Questions connexes