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

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() 来保存几个击键。 (所有悬停操作都是实现 .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; }​