CODEWITHSUNDEEP
jqueryhtml-lists
Lokesh Yadav
Lokesh Yadav

Reputation: 1602

Current index of the LI occurence

The scenario is described below.

<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

I need to change the Down arrow image on the mouseover event of the li. I am using the following script.

function swapArrow_white(){
            $("img.downarrow").attr("src","common/images/downArrowWhite.png");
        }

        function swapArrow_black(){
            $("img.downarrow").attr("src","common/images/downArrow.png");
        }

but, when ever mouseover event occurs, all the dropdown image get changed. It is not picking the current LI on which mouseover event occured.

is there any method to get the current LI so that only one image can change at one time

Please help me with this problem?

Upvotes: 1

Views: 404

Answers (3)

Kit MacAllister
Kit MacAllister

Reputation: 234

Try binding using the Each function to assign each image it's own hover action.

$('li a').each(function(){
    img = $(this).child('img');
    $(this).hover(function(){
        img.addClass('arrowDown');
    },function(){
        img.removeClass('arrowDown');
    });
});

Unless these arrows trigger JS events, CSS is still the way to go here.

Upvotes: 1

fantactuka
fantactuka

Reputation: 3334

I'm agree with Adam's solution but it would be better to use css for this:

.changeColor a {
  background: url('common/images/downArrow.png')
}

.changeColor a:hover {
  background: url('common/images/downArrowWhite.png')
}

I'm pretty sure that its possible to style a element to cover all area of the li (e.g. with display: block)

Js solution:

$('li.changeColor').hover(function() {
  $("img", this).attr("src","common/images/downArrowWhite.png");}
}, function() {
  $("img", this).attr("src","common/images/downArrow.png");}
})

Upvotes: 0

Adam
Adam

Reputation: 44939

Try binding events in jQuery so:

HTML:

<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

jQuery:

$('li.changeColor').mouseover(function(){$("img", this).attr("src","common/images/downArrowWhite.png");})
$('li.changeColor').mouseout(function(){$("img", this).attr("src","common/images/downArrow.png");})

Upvotes: 0

Related Questions