Question

我在这里问了类似的问题

jquery how to change only one parent on hover

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

当我将鼠标悬停在<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中真的很新。

Answer 1

不需要.each，请使用.prev

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

替代方案：您可以使用.parent().children('a')或。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

Answer 2

在这里使用closest('a')不起作用，因为closest navigates up the dom tree，而不是兄弟姐妹。使用.parent('li').find('a')导航会找到相关的＆＃39; a＆＃39;

另外，据我所知，您只需要<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/

jquery如何只更改一个父密集<a> tag on hover</a>

2 个答案:

更新