4

カーソルを合わせると、各リスト項目内にボタンが表示されるリストがあります。ボタンは各リスト項目の右端にあります。これは、リストをスクロールする必要がない場合は正常に機能しますが、スクロールバーが非表示になっている Safari の Lion/Mountain Lion でスクロールが必要な場合は適切に機能しません。マウスが非表示のスクロールバー領域の上にあると、下にある項目の CSS ホバー状態が削除され、ボタンが消えるようです。

ここで問題を再現しました：

http://jsfiddle.net/upsT3/

これに対する解決策/回避策を知っている人はいますか?

マークアップ:

<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;
}
4

1 に答える 1

2

に追加position: relative;する.listと、Safari でのホバーの問題が解消されたように見えますが、クリックの問題は解決しません。

http://jsfiddle.net/zZWPq/

奇妙なことに、含むdivはクリックを登録しますが、登録しbuttonません。もちろん、スクロールバーを完全に非表示にすれば問題は解決しますが、それは UX に悪影響を及ぼします。また何か見つけたら報告します。

于 2013-03-28T18:09:45.610 に答える