0

問題の解決策を Web で検索しましたが、適切な解決策が見つかりませんでした。

マウスをアイコンの上に置いたときに表示されるドロップダウン リストを作成しようとしています。それは機能しますが、ドロップダウン リストでオプションを選択しようとすると、消えてしまいます。ポインターを「アイコン div」から「リスト div」に移動したときに、それを維持する方法がわかりません。多くの人が遭遇した問題は、「リスト div」が「アイコン div」またはメニューに十分に近くないということでした。さまざまな背景を設定してこれを確認しましたが、それらが重なっていることがわかります。

私はあなたにコードを与えます：

.settings_list {
    height: 25px;
    width: 39px;
    position: fixed; top: 26px; right: 7px;
    float: right;
    display: block;
    background: transparent url('resources/img/icons/list.png') center top no-repeat;
}

.settings_list:hover {
    background-image: url('resources/img/icons/list_light.png');
}

.settings_list_sub {
    display: none;
    position: relative;
    padding: 10px;
    left: 40px;
    width: 150px;
    background-color: green;
    color: #999;
    opacity: 0.70;
}

.settings_list:hover + .settings_list_sub {
    display: block; 
}

.settings_list_sub li {
    list-style: none;
    margin-top: -5px;
    background-color: yellow;
}

.settings_list_sub li a {
    text-decoration: none;
    display: block;
    color: #999;
    width: 135px;
    padding: 5px 5px 5px 10px;
    background-color: blue;
}

.settings_list_sub li a:hover {
    text-decoration: none;
    color: #FCFCFC;
    background-color: #06C;
}

そしてHTML：

<div class="settings_list"></div>
<div class="settings_list_sub">
    <li><a href="">Test01</a></li>
    <li><a href="">Option 2</a></li>
    <li><a href="">Option 3</a></li>
    <li><a href="">Log out</a></li>
</div>

多分私はこれを完全に間違っています。あなたが私を助けることができれば、私はとても感謝しています!

実はもう1つ質問があります。JS を使用せずにアイコンをクリック可能にする (ドロップダウン リストを開く) ことはできますか?

前もって感謝します！

4

1 に答える 1

0

次を追加する必要があります。

.settings_list_sub:hover{
     display:block;
}

あなたのコードに、それは動作します:)

于 2013-06-11T00:24:09.390 に答える