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（）函数。