JQuery的懸停在子元素來改變父

Question

的CSS我有一個下拉框，導航菜單上我的網站在這裏：users.aber.ac.uk/mta2/cs15020

有我的下拉菜單，因爲小問題懸停兒童時，css不會影響父元素。

這是我的JQuery包括

在它影響所有的.navlists，使他們堅持的那一刻navigaton菜單。

<h1 id = "title"> Max Atkins </h1> 
      <ul id="menu"> <!-- Drop down navigation menu --> 
       <li class = "navlists"> 
        <a href ="../"> Home </a> 
       </li> 
       <li class = "navlists"> <!-- Main buttons --> 
        <a> Web Assignment </a> 
        <ul class = "sub-menu"> <!-- Drop downs --> 
         <li class = "sublists"> 
          <a href = "./cv.shtml"> CV </a> 
         </li> 
         <li class = "lastitem"> <!-- Specific styling for this link --> 
          <a href = "./writeup.shtml"> Write-Up </a> 
         </li> 
        </ul> 
       </li> 
       <li class = "navlists"> <!-- Main buttons --> 
        <a> Richard's Assignment </a> 
        <ul class = "sub-menu"> <!-- Drop downs --> 
         <li class = "sublists"> 
          <a href = "wordpress"> WordPress </a> 
         </li> 
         <li class = "lastitem"> <!-- Specific styling for this link --> 
          <a href = "webshop/catalog"> WebShop </a> 
         </li> 
        </ul> 
       </li> 
      </ul> 

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
      <script> 

      $(document).ready(function() 
      { 
       $(".navlists > a").hover(function() 
       { 
        $(this).find(".navlists > a").css("border-bottom-left-radius", "0"); 
        $(this).find(".navlists > a").css("border-bottom-right-radius", "0"); 

        $(".sublists > a, .lastitem > a").hover(function() 
        { 
         $(".navlists > a").css("border-bottom-left-radius", "0"); 
         $(".navlists > a").css("border-bottom-right-radius", "0"); 
        }); 
       }); 

       $(".sublists > a, .lastitem > a").mouseleave(function() 
       { 
        $(".navlists > a").css("border-bottom-left-radius", "15px"); 
        $(".navlists > a").css("border-bottom-right-radius", "15px"); 
       }); 
      }); 


      </script> 

Answer 1

你可以這樣做純粹用CSS

，你只需要在頂層li使用:hover選擇並作出選擇更容易類添加到菜單項有像class="hasSub"

子菜單中看到這個小提琴http://jsfiddle.net/Vxuph/1/

Answer 2

如果我正確理解你的問題。嘗試使用父（）：

$(this).find(".navlists > a").parent().css('...','...');