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

当我将鼠标hover在图像上时，我试图让按钮出现。 以下作品：

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

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

http://sofzh.miximages.com/javascript/egeVq.png

在此先感谢您的任何建议。

Answer 1

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

我喜欢使用.hover()来保存几个击键。 （alll hover确实是实现.mouseenter()和.mouseleave() ，但你不必输出它们）

此外，淡化$(this).find(".the-buttons")是非常重要的，这样你只需要更改hover在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() ! }); }); 

尝试使用这个jsFiddle

HTML： - 像这样的东西

 
   
​ 

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

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

Answer 2

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

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