Geek asks and answers

Jquery how to change only one parent closing <a> tag on hover

I asked a similar question here

jquery how to change only one parent on hover

But that is not what I want. so i will recode and post it again here.

I want to change only one parent to <a>when I hang over tags <p>. The code:

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

And 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>

What I want, when I find "A" and "1" , this change and the other does not change and when I am on "b" and "2" , this change of the other does not change either

Sorry, im really new in jquery.

+1
source share
2 answers

.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

Update

.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

0

closest('a') , dom, . .parent('li').find('a') 'a'

, , hover <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/

0

More articles:


All Articles