Question

我有一个脚本：请参阅小提琴http://jsfiddle.net/patrioticcow/ERTWT/。当我将鼠标悬停在图像上时，黑色div向下滑动。我希望它能够点击该div并做一些事情。现在，如果我将鼠标悬停在黑色div上，动画会变得疯狂：）

<div class="profile-img-edit">Change Profile Picture</div>
<img class="profile-img" src="http://download.exploretalent.com/media014/0000145198/0000145198_PM_1298338078.jpg">

$('.profile-img').hoverIntent(function() {
$('.profile-img-edit').slideDown();
}, function() {
$('.profile-img-edit').slideUp("fast");
});

我可以使用hover代替hoverIntent，但不太可靠。

感谢

Answer 1

你遇到的问题是，一旦你将鼠标悬停在div上，你就不会再悬停在图像上了，所以div消失了，然后一旦div消失，你就会再次在图像上盘旋，所以div再次显示..等等。

为什么不将两个元素放在单个父div中，并在其上设置hover事件。像这样：

<div class="profile-img-edit">
  <div class="profile-img-edit-menu">Change Profile Picture</div>
  <img class="profile-img" src="http://download.exploretalent.com/media014/0000145198/0000145198_PM_1298338078.jpg">
</div>

$('.profile-img-edit').hoverIntent(function() {
    $('.profile-img-edit-menu').slideDown();
  }, function() {
    $('.profile-img-edit-menu').slideUp("fast");
});

你可以在这里找到一个小提琴演示：http://jsfiddle.net/wcuDM/3/

Answer 2

问题是你需要检查你是在div上还是在图像上。你可以使用这个javascript：

来做到这一点

var onBlack = false;
var onImage = false;
$('.profile-img').hoverIntent(function() {
    $('.profile-img-edit').slideDown();
    onImage = true;
}, function() {
    onImage = false;
    slideUpCheck();
});

$('.profile-img-edit').hover(function() {
    onBlack = true;
}, function() {
    onBlack = false;
    slideUpCheck();
});

function slideUpCheck() {
    if (!onBlack && !onImage) {
        $('.profile-img-edit').slideUp("fast");
    }
}

你可能还想建立一个暂停，但这取决于你。

jQuery悬停在图像问题上

2 个答案: