與jQuery的

Question

正如標題說懸停功能的鼠標離開事件，我想在jQuery的

與懸停功能，可實現鼠標移出事件

我創造了評分量表，它是執行得很好，但我的問題是，當光標從刻度中取出，活動刻度將保留在最後一次取出鼠標指針的位置。

我創建了帶有懸停功能的代碼，但我無能爲力，該如何執行​​事件。

我想要的東西時​​事件被觸發

代碼如下整個規模應在不活動：

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

}); 

這裏是fiddle

Answer 1

嘗試添加此：

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

，當你離開整個.rating，如果你從元素之間移動內部.rating（不會被解僱鼠標離開只會發生like mouseout）

這是演示：http://jsfiddle.net/WcX5p/1/

Answer 2

看到這個：demo

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