Current index of the LI occurence

Question

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?

Answer 1

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");})

Answer 2

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");}
})