jQuery這個孩子元素懸停acitvate背景顏色

Question

我仍然在學習jQuery，並會欣賞一些指針，因爲我認爲它簡單但不知道如何做到這一點。

查看下面我的標記，由wordpress生成，它是一個側欄列表，帶有帖子數量的分類。

<div id"sidebar-left"> 

     <ul id="sidebar-categories"> 
      <li class="list-header">Contents</li> 

      <li class="cat-item cat-item-3"> 
       <a title="" href="x">News</a> 
       <span>1</span> 
      </li> 
      <li class="cat-item cat-item-4"> 
       <a title="" href="x">Racing</a> 
       <span>4</span> 
      </li> 
      <li class="cat-item cat-item-1"> 
       <a title="" href="x">Uncategorized</a> 
       <span>1</span> 
      </li> 
     </ul> 

    </div> 

現在這很酷，但是我的跨度數絕對超過了li中標記的頂部。

這意味着我的問題是，當我懸停我的標籤，然後懸停跨度，我的標籤的懸停狀態消失。所以我試圖激活一個標籤：當我翻轉跨度時懸停。

現在我管理這個使用下面的jQuery的做...

$("ul#sidebar-categories li span").hover(function() { 
     $("ul#sidebar-categories li a").css({ 
      backgroundColor: "464848" // a tag hover bg color 
     }); 
    }, function() { 
     $("ul#sidebar-categories li a").css({ 
      backgroundColor: "daddd7" // a tag normal bg color 
     }); 
    }); 

但很明顯，你可以看到，這將激活所有的一個標籤的所有背景色在這個側邊欄分類列表。

這是我下面的嘗試，只是爲了激活當前父李內部的標籤背景顏色。但它不起作用。我也試過父母，但仍然沒有工作。

$("ul#sidebar-categories li span").hover(function() { 
     $(this).children("ul#sidebar-categories li a").css({ 
      backgroundColor: "464848" // a tag hover bg color 
     }); 
    }, function() { 
     $(this).children("ul#sidebar-categories li a").css({ 
      backgroundColor: "daddd7" // a tag normal bg color 
     }); 
    }); 

另請參閱下面的列表中的屏幕截圖ui，以便您可以看到爲什麼我需要它以這種方式工作。

所以作爲你徘徊在類別列表，然後將鼠標懸停在「後數」，則A：hover僞類丟失。

在此先感謝。 喬希

////加入我的CSS

#sidebar-left ul { 
    font-family: 'HelveticaNeueMediumCond'; 
    position: relative; 
    border-bottom: 1px solid #eef0eb; 
    padding: 21px 0 0; 
    list-style: none; 
} 

#sidebar-left ul li { 
    position: relative; 
    text-transform: uppercase; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    display: block; 
    height: 48px; 
} 

.list-header { 
    border-top: 1px solid #eef0eb !important; 
    border-bottom: 1px solid #c6c8c2 !important; 
    height: 15px !important; 
    padding: 7px 10px 5px !important; 
    background: #c4c7c2; 
    color: #fbfcfb; 
    font-size: 14px; 
} 

#sidebar-left ul li a { 
    width: 270px; 
} 

#sidebar-left ul li a { 
    height: 20px; 
    display: inline-block; 
    border-top: 1px solid #eef0eb; 
    border-bottom: 1px solid #c6c8c2; 
    text-decoration: none; 
    font-size: 20px; 
    padding: 13px 10px; 
    color: #464848; 
    text-shadow: #eef0ea 1px 1px 0; 
    outline: 0; 
} 

#sidebar-left ul li a:hover { 
    border-top: 1px solid #4c4e4c; 
    border-bottom: 1px solid #464848; 
    text-decoration: none; 
    color: #fbfcfb; 
    text-shadow: #2d2e2e 1px 1px 0; 
    background: #464848; 
} 

#sidebar-left ul li span { 
    position: absolute; 
    right: 10px; 
    background: #ffffff; 
    padding: 4px 0; 
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px; 
    font-size: 15px; 
    color: #2cbcf5; 
    height: 15px; 
    min-width: 24px; 
    text-align: center; 
    z-index: 2; 
    top: 0; 
    font-family: 'HelveticaNeueBoldCond'; 
    margin: 12px 0; 
    -webkit-box-shadow: 0px 1px 0px 0px #cbcec8; 
    -moz-box-shadow: 0px 1px 0px 0px #cbcec8; 
    box-shadow: 0px 1px 0px 0px #cbcec8; 
} 

#sidebar-left ul li span:hover { 
    -webkit-box-shadow: 0px 1px 0px 0px #252525; 
    -moz-box-shadow: 0px 1px 0px 0px #252525; 
    box-shadow: 0px 1px 0px 0px #252525;  
} 

Answer 1

有沒有什麼不能激活父列表項的懸停，而不是錨標籤的原因是什麼？如果這不起作用，您可以使用.siblings（）函數來選擇跨度的所有同級DOM元素。試試這樣的：

$("ul#sidebar-categories li span").hover(function() { 
    $(this).siblings().css({ 
     backgroundColor: "464848" // a tag hover bg color 
    }); 
}, function() { 
    $(this).siblings().css({ 
     backgroundColor: "daddd7" // a tag normal bg color 
    }); 
}); 

這將選擇任何直接的兄弟姐妹和改變他們的背景顏色。如果您需要進一步過濾元素，則可以將CSS選擇器傳遞給.siblings（）函數。