Question

我正在尝试将鼠标悬停在图像上时显示按钮。以下作品：


    jQuery('.show-image').mouseenter(function() {
 jQuery('.the-buttons').animate({
  opacity: 1
 }, 1500);
}).mouseout(function() {
 jQuery('.the-buttons').animate({
  opacity: 0
 }, 1500); 
});

然而，当从图像移动到按钮（在图像上方）时，会触发mouseout / mouseenter，因此按钮淡出然后淡入（按钮与图像具有相同的类别，否则它们只是保持淡出）。如何防止这种情况发生？我也使用jQuery的悬停尝试了上面的代码;相同的结果。这是图像的细节，显示了不透明度为1的按钮（因为我在图像上方）：

http://i.stack.imgur.com/egeVq.png

提前感谢任何建议。

Answer 1

最简单的解决方案是将两者放在同一个父div中，并为父div提供show-image类。

我想使用 .hover() 来保存一些击键。（alll hover确实是 .mouseenter() 和 .mouseleave() ，但您不必输入它们。

此外，淡化$(this).find(".the-buttons")非常重要，因此您只需更改悬停在div上方的按钮，否则您将更改整个页面上的所有.the-buttons！ .find() 只是寻找后代。

最后， .animate() 会有效，但为什么不使用 .fadeIn() 和 .fadeOut() ？

JS：

jQuery(function() {                                              // <== Doc ready

    jQuery(".the-buttons").hide();                  // Initially hide all buttons

    jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);         // use .find() !
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500);         // use .find() !
    });
});

Try it out with this jsFiddle

HTML： - 像这样的东西

<div class="show-image">
    <img src="http://i.stack.imgur.com/egeVq.png" />
    <input class="the-buttons" type="button" value=" Click " />
</div>

CSS： - 像这样的东西。你的可能会有所不同。

div {
    position: relative;
    float:left;
    margin:5px;}
div input {
    position:absolute;
    top:0;
    left:0; }

Answer 2

将图像和按钮放在同一个div中，然后将mouseover / mouseout事件放在div上。无论您的鼠标是在按钮还是图像上，它仍然会超过div。

此外，我不确定mouseenter(...).mouseout(...)是否有效。我总是使用hover(..., ...)

将鼠标悬停在图像上以显示按钮，并将鼠标悬停在实际按钮上时不会触发

2 个答案:

Try it out with this jsFiddle