0

正如标题所说，我想在 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');
    }

});

这是小提琴

4

2 回答 2

1

尝试添加这个：

$(".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/

于 2013-01-15T14:57:55.820 回答
1

看到这个：演示

$('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');
}
});
于 2013-01-15T15:02:04.413 回答