CSSを使用してマウスをホバーでサブクラスを表示する

CSSを使用して、そのサブクラス名をホバーに表示しようとしていますが、正しく動作していないようです。ユーザーがhover_groupのmyhoverクラスに移動すると、hidden_infoが表示されます。CSSを使用してマウスをホバーでサブクラスを表示する

+または~ CSSセレクタを使用してみましたが、機能していないようです...何か間違っていますか？

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <style> 

     .hidden_info { 
      display:none; 
     } 

     .hover_group .myhover:hover{ 
      background-color: yellow; 

      //.hidden_info { 
       // background-color: red; 
       //display:block; 
      //} 
     } 
    </style> 
</head> 


<body> 

<div class="hover_group"> 
    <ul> 
     <li class="myhover"> 
      <div class="myhover">hover here!</div> 
      <div class="hidden_info">Hello world!</div> 
     </li> 
     <li class="myhover"> 
      <div class="myhover">hover here!</div> 
      <div class="hidden_info">Hello world!</div> 
     </li> 
     <li class="myhover"> 
      <div class="myhover">hover here!</div> 
      <div class="hidden_info">Hello world!</div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

出典

2017-08-17 adrive

異なる要素（liおよびdiv）に同じクラスを使用しています。次に、影響を与える要素をより具体的にする必要があります。

この場合、divのホバーをチェックし、兄弟が表示されます。したがって、+が使用されます。リスト項目のホバーを検証する場合は、クラス.hiddenのdivがリスト項目の兄弟ではなく子要素であるため、+を削除する必要があります。

.hidden_info { 
 
    display: none; 
 
} 
 

 
div.myhover:hover+.hidden_info { 
 
    background-color: yellow; 
 
    display: inline-block; 
 
}

<div class="hover_group"> 
 
    <ul> 
 
    <li class="myhover"> 
 
     <div class="myhover">hover here!</div> 
 
     <div class="hidden_info">Hello world!</div> 
 
    </li> 
 
    <li class="myhover"> 
 
     <div class="myhover">hover here!</div> 
 
     <div class="hidden_info">Hello world!</div> 
 
    </li> 
 
    <li class="myhover"> 
 
     <div class="myhover">hover here!</div> 
 
     <div class="hidden_info">Hello world!</div> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2017-08-17 08:02:02 Gerard

CSSを使用してマウスをホバーでサブクラスを表示する

答えて

関連する問題