サブメニューにどのようにホバー効果を追加できますか？

Question

私は独自のブートストラップhtml5テーマを作成しようとしていますが、サブメニューが開いたらjqueryを使用してホバーCSSを追加します。私は唯一のサブメニューがホバーしたい。

jQueryの

を私はこれまでのところ、これを行っているが、イム持つstrugleは、どのように私は私のサブメニューにホバーアクションニルを追加することができます

$(function (event) { 
    $(document).ready(function() { 
     $('.site-menu li:has(ul)').click(function(e) { 
      e.preventDefault(); 
      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
       $(this).children('ul').slideUp(); 
      }else{ 
       $('.site-menu li ul').slideUp(); 
       $('.site-menu li').removeClass('active'); 
       $(this).addClass('active'); 
       $(this).children('ul').slideDown(); 
      } 
     }); 
    }); 
}); 

ビュー

<div class="site-menubar site-menubar-light site-menubar-light"> 
    <div class="site-menubar-body" style="position: relative;"> 
     <div style="height: 652px; width: 277px;"> 
      <div style="width: 260px;"> 
       <ul class="site-menu"> 
        <li class="site-menu-item"><a href="#"><i class="fa fa-tachometer site-menu-icon" aria-hidden="true"></i> 
         <span class="site-menu-title">Dashboard</span> 
         <div class="site-menu-badge"> 
         <span class="badge badge-success">3</span> 
         </div> 
        </a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="menu-collapsed.html"><span class="site-menu-title">item 1</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 2</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 3</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 4</span></a></li> 
         </ul> 
        </li> 
        <li class="site-menu-item"><a href="#">item 2</a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="#">item 5</a></li> 
          <li class="site-menu-item"><a href="#">item 6</a></li> 
          <li class="site-menu-item"><a href="#">item 7</a></li> 
          <li class="site-menu-item"><a href="#">item 8</a></li> 

         </ul> 
        </li> 
        <li class="site-menu-item"><a href="#">item 3</a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="#">item 9</a></li> 
          <li class="site-menu-item"><a href="#">item 10</a></li> 
          <li class="site-menu-item"><a href="#">item 10</a></li> 
          <li class="site-menu-item"><a href="#">item 12</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 1

あなたのスタイルシートに、このCSSを追加してみてください：

.site-menu-sub .site-menu-item:hover { 
    background-color: blue; 
} 

2つのクラスの間のスペースは意味があります。 site-menu-subの子要素である 'site-menu-item'クラスの要素にスタイルを適用する必要があることを示します。