1

我在这里问了类似的问题

jquery如何在悬停时仅更改一个父级

但这不是我想要的。所以，我重新编码并在这里再次发布

<a>当我将鼠标悬停在<p>标签上时，我只想更改一个父级。代码是：

$('.hover').each(function () {
 $(this).parent().hover(function () {
        $('p').parent(this).css('background-color','red');
    }, function () {
        $('p').parent(this).css('background-color','black');
 });
});

HTML是：

<ul>
   <li><a href='#'>1</a> <p class='hover'>A</p></li>
   <li><a href='#'>2</a> <p class='hover'>B</p></li>
   <li><a href='#'>3</a> <p class='hover'>B</p></li>
   <li><a href='#'>4</a> <p class='hover'>X</p></li>
   <li><a href='#'>5</a> <p class='hover'>Y</p></li>
   <li><a href='#'>6</a> <p class='hover'>Z</p></li>
</ul>

我想要的是当我将鼠标悬停在“A”和“1”上时发生变化而其他没有变化，当我悬停在“b”和“2”上时其他也没有变化

对不起，我真的是 jquery 的新手。

4

2 回答 2

0

不需要.each，使用.prev

$('.hover').hover(function () {
        $(this).prev('a').css('background-color','red');
    }, function () {
        $(this).prev('a').css('background-color','yellow');
 });

替代方案：您可以使用.parent().children('a')OR 。siblings('a')代替.prev('a')

​​​ Demo

更新

如果您想使用.each（如您在评论中提到的），请执行以下操作。

$('.hover').each(function () {
 $(this).parent().hover(function () {
        $(this).children('a').css('background-color','red');
    }, function () {
        $(this).children('a').css('background-color','yellow');
 });
});

Demo using .each

于 2012-09-14T04:38:10.467 回答
0

在这里使用closest('a')不起作用，因为最接近的导航到 dom 树，而不是兄弟姐妹。导航使用.parent('li').find('a')将找到关联的“a”

另外，据我所知，您只需要 . 上的悬停处理程序<p>，因此不需要each.

$('.hover').hover(function () {
        $(this).parent('li').find('a').css('background-color','red');
    }, function () {
        $(this).parent('li').find('a').css('background-color','black');
 });

在这里小提琴：http: //jsfiddle.net/U4n2T/16/

于 2012-09-14T05:27:18.997 回答