jQuery将鼠标悬停在图像上的问题

Question

我有一个脚本：请参阅小提琴http://jsfiddle.net/patrioticcow/ERTWT/。 当我将鼠标悬停在图像上时，黑色的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 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

的问题是，你需要检查，如果你无论是在股利或图像上。你可以通过使用这个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"); 
    } 
} 

你可能也想建立在一个小超时，但这取决于你。