0

タイトルの通りjQueryのホバー機能でマウスアウトイベントを行いたい

私は評価スケールを作成しましたが、それは非常にうまく機能していますが、私の問題は、カーソルがスケールから取り出されたときに、マウスポインタが最後に取り出された場所にアクティブなスケールが残ることです。

mouse_outHover 関数を使用してコードを作成しましたが、それを使用してイベントを実行する方法がわかりません。

私が望んでいたのは、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 に答える