2

<ul>および<li>要素で構築された選択ボックスがあります。一部のリスト項目は親ボックスよりも幅が広いため、:after疑似要素を追加して、完全なコンテンツを上に重ねます:hover。

要素に垂直スクロールバーがある場合を除いて、すべてうまく機能します。<ul>次に、オーバーレイが非表示になり、水平スクロールバーが表示されます。

親の垂直スクロールバーの上に子オーバーレイを表示する方法はありますか?

ここの JSFiddle: http://jsfiddle.net/x9TZB/14/ (Chrome で動作しますが、現在 IE10 をクラッシュさせています... 変です。)

アップデート：

<div>別の要素を DOM に追加し、<li>要素の上に配置し、一連のイベントとタイマーを設定することで、(ほとんどの場合) 問題を解決できました。まだ荒削りな部分があります。決して完璧ではありません (特に IE は をサポートしていないためpointer-events:none)。

誰かが実用的な解決策を見つけた場合に備えて、この質問を開いたままにします-そうでない場合は、おそらくHTML5標準レイアウトルールの更新に関する暗黙の提案として:-)

JSFiddle ページが消えた場合に備えて、コードがここに貼り付けられます。<ul>要素から「スクロール」クラスを追加/削除して、違いを確認してください。

-- CSS --

ul {
    position: absolute;
    display: block;
    margin: 0;
    list-style-type: none;
    border: 1px solid #aaaaaa;
    width: 150px;
    font: 12px verdana, arial, sans-serif;
    padding: 0;
    overflow-x: visible;
}
ul.scrolling {
    overflow-y: scroll;
    margin-right: -16px;
}
li {
    position: relative;
    margin: 0;
    padding: 0 5px;
    line-height: 25px;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
    cursor: pointer;
    overflow: hidden;
}
ul.scrolling > li {
    padding-right: 6px;
}
li:hover {
    background-color: #c7e0ff;
    overflow: visible;
}
li:hover:after {
    content: attr(contents);
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 5px;
    z-index: 999999;
    background-color: #c7e0ff;
}


-- HTML --

<ul class="scrolling">
    <li>Lorem ipsum</li>
    <li>Dolor sit amet</li>
    <li>Consectetur adipisicing elit</li>
    <li>Sed do eiusmod tempor</li>
    <li>Incididunt ut labore et dolore</li>
    <li>Magna aliqua</li>
    <li>Ut enim ad minim veniam</li>
    <li>Quis nostrud exercitation</li>
    <li>Ullamco laboris nisi ut</li>
    <li>Aliquip ex ea commodo consequat</li>
    <li>Duis aute irure dolor</li>
    <li>In reprehenderit</li>
    <li>In voluptate velit esse</li>
    <li>Cillum dolore eu fugiat nulla pariatur</li>
    <li>Excepteur sint occaecat</li>
    <li>Cupidatat non proident</li>
    <li>Sunt in culpa qui officia</li>
    <li>Deserunt mollit anim id est laborum</li>
</ul>


-- JavaScript (using jQuery) --

//Make sure this is run after the DOM is ready.
$('li').each(function () {
    $(this).attr('contents', $(this).html());
});
4

1 に答える 1

0

私はあなたが求めている効果を達成したようです。少し「ぎくしゃく」しているように見えますが、おそらくこれは良い出発点です。

div 内にリストを含め、overflow-y をスクロールに設定しました。次に、z-index を増やしてホバー時に li の位置を絶対位置に設定します。z-index を変更すると、「ジッター」が発生するようです。これはChromeで機能しました。

見てください - http://jsfiddle.net/x9TZB/17/

CSS の変更

li:hover{z-index:1;position:absolute;}
#listContainer{z-index:0;width:150px;height:200px;border:1px solid red;overflow-y:scroll;overflow-x:visible;}

更新:これは包含 div なしで機能します。上記のフィドルから div を削除するだけです。また、IE9 でテストしたところ、問題なく動作するようです。

于 2013-04-12T01:00:26.960 に答える