Событие мыши с функцией наведения в jquery

Как говорится в заголовке, я хочу выполнить событие мыши с функцией наведения в jQuery.

Я создал рейтинговую шкалу, и она работает довольно хорошо, но моя проблема в том, что когда курсор вынимается из шкалы, активная шкала остается в том месте, где указатель мыши был выведен в последний раз.

Я создал код с функцией Hover, но не знаю, как выполнить с ней событие mouse_out.

я хотел, чтобы вся шкала была неактивна, когда запускается событие mouse_out

коды приведены ниже:

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

});

вот скрипта


jquery mouseout jquery-hover
person Arish    schedule 15.01.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте добавить это:

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

Mouseleave произойдет только тогда, когда вы покинете весь .rating, и не сработает, если вы перейдете от элемента к элементу внутри .rating (как это делает mouseout)

Вот демо: http://jsfiddle.net/WcX5p/1/

person Viktor S.    schedule 15.01.2013
comment
Спасибо, это выглядит чище, если углубиться в функцию наведения мыши. - person Arish; 15.01.2013

arrow_upward
1
arrow_downward

См. это: демонстрация

$('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');
}
},function() {
for (var j = 0; j <= 10; j++) {
    $('#image_' + j).attr('src','http://cdn1.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Star-Favorites.png');
}
});
person Anujith    schedule 15.01.2013