3

私は次のHTMLを持っています

<ul>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>

マウスがリスト項目の上に移動したときにスパン要素をフェードインし、マウスが項目から離れたときにフェードアウトしたいと思います。しかし、マウスがスパン自体を超えた場合、マウスが離れた後でも表示したままにしたいと思います。私は何度か試みましたが、マウスが上にないときにスパンが消えるたびに。以下に、最後の 2 回の試行が表示されます。

$(".operation").on("mouseenter", function(event){
$(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").off("mouseleave", function(event){
    $(this).fadeOut(200);
});

と

$(".operation").on("mouseenter", function(event){
 $(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").hover(function(){
  $(this).off("mouseleave", function(event){
    $(this).fadeOut(200);
  });
});

何か不足していますか？どうすれば修正できますか？

ありがとう、良い一日を。

4

1 に答える 1

0

私はこのようなことをします：

$('.operation').hover(function () {
    var i = $(this).index();
    $('span').eq(i).stop(true).animate({'opacity' : 1}, 200);
}, function () {
    $('span').animate({'opacity' : 0}, 200);    
});

$('span').hover(function () {
    $(this).animate({'opacity' : 1}, 200);
}, function () {
    return false;
});

jQueryには、ユーザーがカーソルを要素の上にすばやく連続して数回移動すると、要素の不透明度が徐々に（そして不可逆的に）減少するという面白い小さなバグがあるため、ホバーイベントにfadeInandメソッドを使用しない傾向があります。fadeOut

stop現在のアニメーションを終了するメソッドを含めることができます。の引数を渡すとtrue、アニメーションキューがクリアされます。

ここで私の作業例を見ることができます：http：//jsfiddle.net/xKy49/2/

ホバー時の動作が異なる場合、スパンをリストアイテムの子要素にすることはできません。

また、クラス宣言を閉じることを忘れないでください！後に二重引用符が必要です operation：

<li class="operation">Lorem ...
于 2012-05-10T08:28:09.027 に答える