divに画像がホバーに反応しない

Question

私には2つのdivsがあります.1つは画像を含み、もう1つはメニューバーを含みます。アイデアは#changeLayerアイコンの上にカーソルを置くと、メニューが表示されます。私は試みました：

#changeLayer:hover > #menu{ 
    visibility:visible; 
} 

しかし、これは動作しません。 #changeLayerの可視性を表示するように設定しただけでは、画面に表示されますが、何らかの理由でホバー機能が動作しません。私は、divの順序を並べ替える、z-インデックスを変更しようとしましたが、何も起こりません。これはイメージファイルを使用しているためですか？回避策がありますか？

CSS：

#menu { 
    position: absolute; 
    z-index: 2; 
    background: #fff; 
    right: 200px; 
    padding: 10px; 
    font-family: 'Open Sans', sans-serif; 
    visibility: hidden; 
} 
#changeLayer{ 
    content:url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
    position: fixed; 
    z-index: 3; 
    top: 1%; 
    left: 26%; 
    height: 50px; 
    width: 50px; 
    opacity: 0.9; 
    } 

    #changeLayer:hover > #menu{ 
    visibility:visible; 
} 

HTML：

<div id='changeLayer'></div> 
<div id='menu'> 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
    <label for='bright'>bright</label> 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
    <label for='light'>light</label> 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
    <label for='dark'>dark</label> 
</div> 

Answer 1

>子コンビネータセレクタです。それはあなたのセレクターに一致する1層の深い子供をターゲットにします。

代わりに使用するのは+です。隣接する兄弟セレクタは、セレクタと一致する場合に次の要素をターゲットにします。

これは参照のために良い記事です - あなたは#changeLayerをホバーした後に開いた#menuを維持する最も簡単な方法は、上:hoverを使用し、その後、両方の要素でそれらをラップすることですhttps://css-tricks.com/child-and-sibling-selectors/

#menu { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: #fff; 
 
    right: 200px; 
 
    padding: 10px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    visibility: hidden; 
 
    } 
 
    
 
    #changeLayer { 
 
    content: url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
 
    position: fixed; 
 
    z-index: 3; 
 
    top: 1%; 
 
    left: 26%; 
 
    height: 50px; 
 
    width: 50px; 
 
    opacity: 0.9; 
 
    } 
 
    
 
    #changeLayer:hover + #menu { 
 
    visibility: visible; 
 
    }

<div id='changeLayer'></div> 
 
<div id='menu'> 
 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
 
    <label for='bright'>bright</label> 
 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
 
    <label for='light'>light</label> 
 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
 
    <label for='dark'>dark</label> 
 
</div>

親要素この作品

#menu { 
 
    position: absolute; 
 
    z-index: 2; 
 
    background: #fff; 
 
    right: 200px; 
 
    padding: 10px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    visibility: hidden; 
 
    } 
 
    
 
    #changeLayer { 
 
    content: url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
 
    position: fixed; 
 
    z-index: 3; 
 
    top: 1%; 
 
    left: 26%; 
 
    height: 50px; 
 
    width: 50px; 
 
    opacity: 0.9; 
 
    } 
 
    
 
    .wrap { 
 
    position: relative; 
 
    height: 50px; 
 
    } 
 
    .wrap:hover #menu { 
 
    visibility: visible; 
 
    }

<div class="wrap"> 
 
<div id='changeLayer'></div> 
 
<div id='menu'> 
 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
 
    <label for='bright'>bright</label> 
 
    <input id='light' type='radio' name='rtoggle' value='light', checked='checked'> 
 
    <label for='light'>light</label> 
 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
 
    <label for='dark'>dark</label> 
 
</div> 
 
</div>