Why last element always fired on hover?

Question

As you can see from the fiddle, I want to change color of span when hover on it, but somehow even I hover any in the first three element, the hover event just apply for the last span.

HTML

<p class="p">
    <span>Span 1</span>
</p>

<p class="p">
    <span>Span 2</span>
</p>

<p class="p">
    <span>Span 3</span>
</p>

<p class="p">
    <span>Span 4</span>
</p>

jQuery:

$('.p').each(function() {
    $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});

Does your actual markup has more than one span per paragraph? — Bergi, Apr 30 '13 at 13:10
Is there any reason why you wouldn't [do this with plain old css](http://jsfiddle.net/excentris/QSnNf/)? — excentris, Apr 30 '13 at 13:30

score 6 · Accepted Answer · answered Apr 30 '13 at 13:01

6

Add var before $span:

var $span = $(this).children('span');

Currently, you're declaring a global variable, which will be overwritten at each iteration in the loop.

Updated Demo

answered Apr 30 '13 at 13:01

Eli

14,779
5
59
77

score 5 · Answer 2 · answered Apr 30 '13 at 13:04

You have only one global $span variable which after the loop will contain the last iterated element. Instead, make the variable local with a var declaration:

$('.p').each(function() {
    var $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});

score 1 · Answer 3 · answered Apr 30 '13 at 13:04

1

There is no need for the .each()

You can try this:

$('.p').children('span').hover(
        function() {
            $(this).css('color', 'red');
        },
        function() {
            $(this).css('color', 'blue');
        });

check fiddle here

answered Apr 30 '13 at 13:04

97ldave

5,249
4
25
39

That does a different thing. – Bergi Apr 30 '13 at 13:05
@Bergi it changes the color of the span when you hover over it. That's what the OP wants isnt it? – 97ldave Apr 30 '13 at 13:08
OK, it's only different if there is more than one span per paragraph. Not sure whether that's intended by the OP? – Bergi Apr 30 '13 at 13:10
@Bergi I've answered based on the information provided by the OP. Is that incorrect? – 97ldave Apr 30 '13 at 13:12

score 1 · Answer 4 · answered Apr 30 '13 at 13:06

1

$("p span").hover(function(){

  $("span ").css("color","red");
}).mouseout(function(){
$("p span ").css("color","black");
});

answered Apr 30 '13 at 13:06

bipen · Answer 5 · 2013-04-30T13:08:53.380

0

try this

  $('.p').each(function() {
   var $span = $(this).children('span');
   $span.hover(
    function() {
        $(this).css('color', 'red');
    },
    function() {
        $(this).css('color', 'blue');
    }
  )
});

or without the loop (which is not required at all )

 $('.p').children('span').hover(
    function() {
        $(this).css('color', 'red');
    },
    function() {
        $(this).css('color', 'blue');
    }
  )
});

fiddle here

edited Apr 30 '13 at 13:08

answered Apr 30 '13 at 13:01

bipen

36,319
9
49
62

1

Ask @Eli why he downvotes your answer having even more wrong answer. – VisioN Apr 30 '13 at 13:03
1

@Eli Haven't you reverted it? – VisioN Apr 30 '13 at 13:08

score 0 · Answer 6 · answered Apr 30 '13 at 13:02

0

Please check here http://jsfiddle.net/VREtC/2/

  $('.p').hover(
        function() {
            $(this).css('color', 'red');
        },
        function() {
            $(this).css('color', 'blue');
        }
    )

answered Apr 30 '13 at 13:02

vinothini

2,606
4
27
42

score 0 · Answer 7 · answered Apr 30 '13 at 13:04

If you want to make your code work, make $span a closure variable by using var

$('.p').each(function() {
    var $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});

Demo: Fiddle

Why last element always fired on hover?

7 Answers7