jQuery如何仅更改一个父closeset< A>悬停标签 [英] jquery how to change only one parent closeset <A> tag on hover

问题描述

我在这里问了类似的问题

I asked similar question here

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

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

But it's not what I want. so , I re-code and post it again here

当我将鼠标悬停在<p>标记上时，我只想更改<a>上的一个父对象.代码是:

I would like to change only one parent on <a> when I hover over <p> tags. The code is:

$('.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" 上时，其他更改也不会更改

What i want is when i hover "A" and "1" is change and other not change and when i hover on "b" and "2" is change other not change also

对不起，我在jquery中确实很新.

sorry , im really new in jquery.

推荐答案

不需要.each，请使用 .prev

there is no need of .each, use .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')

alternative : you can use .parent().children('a') OR .siblings('a') instead of .prev('a')

Demo

如果要使用.each(如您在注释中提到的)，请执行以下操作.

If you want to use .each ( as you mentioned in comment ) then do below.

$('.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

这篇关于jQuery如何仅更改一个父closeset< A>悬停标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！