Daphne1905
New Member
I have a list where a button shows up inside each list item when you hover over it. The button is on the right edge of each list item. This works fine when the list doesn't need to scroll, but it doesn't work properly when scrolling is needed on Lion/Mountain Lion in Safari with hidden scrollbars. It seems the CSS hover state of the underlying item is removed when the mouse is over the hidden scrollbar area so the button disappears.I've reproduced the problem here:http://jsfiddle.net/upsT3/Does anyone know of a solution/workaround for this?Markup:\[code\]<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>\[/code\]CSS:\[code\].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;}\[/code\]