Question

As the title say, I want to perform mouse out event with the hover function in jQuery

I had created the rating scale and it is performing quite well but my problem is when cursor is taken out from the scale the active scale will remain at the place where the mouse pointer is taken out the last time.

I created the code with Hover function but I’m clueless how to perform mouse_out event with it.

what I wanted is entire scale should be inactive when mouse_out event is triggered

codes are given below:

HTML:

<ul class="rating">
    <li><a href="#" id="rate_0"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_0" /></a></li>
    <li><a href="#" id="rate_1"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_1" /></a></li>
    <li><a href="#" id="rate_2"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_2" /></a></li>
    <li><a href="#" id="rate_3"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_3" /></a></li>
    <li><a href="#" id="rate_4"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_4" /></a></li>
    <li><a href="#" id="rate_5"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_5" /></a></li>
    <li><a href="#" id="rate_6"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_6" /></a></li>
    <li><a href="#" id="rate_7"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_7" /></a></li>
    <li><a href="#" id="rate_8"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_8" /></a></li>
    <li><a href="#" id="rate_9"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_9" /></a></li>
    <li><a href="#" id="rate_10"><img src="http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png" width="16" height="16" id="image_10" /></a></li>
</ul>

CSS:

.rating{ 
list-style:none;
}
.rating li{
display:block;
float:left;
}
.rating li a{
margin: 2px;
padding: 2px;
float: left;
font-size: 1.3em;
text-align: center;
font-weight: normal;
color: #6d6e70;
text-decoration:none;
}

jQuery:

$('a[id^="rate_"]').hover(function() {

    //alert($(this).attr('id'));
    var ID = $(this).attr('id');

    var num = ID.substr(5);

    //alert(num);
    var i = 0;

    for (var j = 0; j <= 10; j++) {
        $('#image_' + j).attr('src','http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png');
    }

    for (i = 0; i <= num; i++) {
        $('#image_' + i).attr('src','http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/keditbookmarks.png');
    }

});

here is the fiddle

Answer 1

Try to add this:

$(".rating").mouseleave(function() {
  $(this).find('img').attr('src','http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png');
})

Mouseleave will happen only when you leave whole .rating and will not be fired if you move from element to element inside .rating (like mouseout does)

Here is a demo: http://jsfiddle.net/WcX5p/1/