Why last element always fired on hover?

Question

Fiddle: http://jsfiddle.net/vretc/ 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 ```

Span 1

Span 2

Span 3

Span 4

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

Accepted Answer

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

Why last element always fired on hover?

Solution

Problem