ドロップダウンリストにカーソルを置いたときに、どのようにナビゲーションバーにホバー効果を残しますか？

Question

ナビゲーションバーにホバー効果があり、ドロップダウンを追加したばかりです。 リストにカーソルを置くとホバー効果が失われます。ホバー効果を維持するにはどうすればよいですか？ 私の現在のCSS： .navbar-list:hover {color:red;}

HTML：

<li class="dropdown"> <a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown"> About Us </a> <ul class="dropdown-menu"> <li><a href="company-profile.html">Company Profile</a></li> <li><a href="board-of-director.html">Board of Director</a></li> </ul> </li> 私はリストを置くと、それはホバー効果を持たせるためにCSSを追加するにはどうすればよいですか？

Answer 1

あなたのコードによれば、このようなCSSセレクタを変更する必要があります。

/* 
 
.navbar-list:hover {color:red;} 
 
*/ 
 
.dropdown:hover {color:red;}

<li class="dropdown"> 
 
    <a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown"> 
 
      About Us 
 
     <!-- 
 
      Or you can put your dropdown-menu here 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="company-profile.html">Company Profile</a></li> 
 
       <li><a href="board-of-director.html">Board of Director</a></li> 
 
      </ul> 
 
     --> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="company-profile.html">Company Profile</a></li> 
 
     <li><a href="board-of-director.html">Board of Director</a></li> 
 
    </ul> 
 
</li>

CSSセレクタ.navbar-list:hover {color:red;}dropdown-menuが含まれていない

<a href="#" class="navbar-list dropdown-toggle" data-toggle="dropdown">About Us </a>に示します。

あなたの要求に合わせてCSSセレクターまたはHTML構造を変更することができます。