Question

我已经阅读了所有相关帖子，似乎没有什么能解决我的问题。我有一个我希望悬停在div上的div，然后出现第二个div但是我希望第二个div上的mouseout不在第一个div上。我使用http://blogswizards.com/jquery-fade-in-fade-out-effect中的代码作为基础，但我试图调整它来做我想要的。我对Jquery很新，这让我很难过。有人可以帮忙吗？

 $(function() {
// OPACITY OF DIV SET TO 0%
$(".panel").css("opacity","0.0");

// ON MOUSE OVER
$(".trigger").hover(function () {

// SET OPACITY TO 100%
$(".panel").stop().animate({
opacity: 1.0}, "slow");
},

// ON MOUSE OUT
$(".panel).mouseout(function () {

// SET OPACITY BACK TO 0%
$(this).stop().animate({
opacity: 0.0}, "slow");
});
});

Answer 1

你使用的悬停函数有两个参数，一个用于mouseenter，一个用于mouseleave，但它们适用于同一个元素。您可以执行类似的操作将事件侦听器绑定到不同的元素。

$(function() {

 // OPACITY OF DIV SET TO 0%
 $(".panel").css("opacity","0.0");

 // ON MOUSE ENTER, PREVENT EVENT BUBBLING
 $(".trigger").mouseenter(function () {

  // SET OPACITY TO 100%
  $(".panel").stop().animate({
   opacity: 1.0}, "slow");
  }
 });

 // ON MOUSE LEAVE
 $(".panel").mouseleave(function () {

  // SET OPACITY BACK TO 0%
  $(this).stop().animate({
  opacity: 0.0}, "slow");
 });
});

Answer 2

好像你的代码有点不对劲：

它应该是这样的：

$(document).load(function() {
    // OPACITY OF DIV SET TO 0%
    $(".panel").css("opacity","0.0");

    // ON MOUSE OVER
    $(".trigger").hover(function () {

        // SET OPACITY TO 100%
        $(".panel").stop().animate({
            opacity: 1.0
        }, "slow");
    },function(){});

    // ON MOUSE OUT
    $(".panel").mouseout(function () {
        // SET OPACITY BACK TO 0%
        $(this).stop().animate({
            opacity: 0.0
        }, "slow");
    });
});

Answer 3

http://jsfiddle.net/PvVg9/

看到我为此做的小提琴。

$('.trigger').mouseover(function() {
    $('.panel').fadeIn(function() {
        $(this).one('mouseover', function() {
           $(this).fadeOut();
        });
    });  
});

Jquery FadeIn悬停在一个元素上并在mouseout上淡出第二个元素

3 个答案: