Question

正如标题所说，我想用jQuery中的悬停功能执行鼠标输出事件

我已经创建了评级量表并且表现相当不错但我的问题是当光标从标尺中取出时，活动标尺将保留在最后一次取出鼠标指针的位置。

我使用悬停功能创建了代码，但我对如何使用它执行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');
    }

});

这是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时才会发生Mouseleave，如果你在.rating内从一个元素移动到另一个元素，就不会被触发（就像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');
}
});

在jquery中使用悬停功能将鼠标移出事件

2 个答案: