[英]Hover over image to show buttons and don't trigger when hovering over actual buttons
I'm trying to get buttons to appear when hovering over an image. 当我将鼠标悬停在图像上时,我试图让按钮出现。 The following works:
以下作品:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). 然而,当从图像移动到按钮(在图像上方)时,鼠标输出/鼠标中心被触发,因此按钮淡出然后淡入(按钮与图像具有相同的类别,否则它们只会保持褪色出)。 How can I prevent this from triggering?
如何防止这种情况发生? I've also tried the above code using jQuery's hover;
我也使用jQuery的悬停尝试了上面的代码; same results.
相同的结果。 Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
这是图像的细节,显示了不透明度为1的按钮(因为我在图像上方):
http://i.stack.imgur.com/egeVq.png http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions. 在此先感谢您的任何建议。
The simplest solution is to put the two in the same parent div
and give the parent div
the show-image
class. 最简单的办法是把两个相同的父
div
,给父div
的show-image
类。
I like to use .hover()
to save a few key strokes. 我喜欢使用
.hover()
来保存几个击键。 (alll hover does is implement .mouseenter()
and .mouseleave()
, but you don't have to type them out) (alll hover确实是实现
.mouseenter()
和.mouseleave()
,但是你不必输出它们)
Additionally it's very imporant to fade $(this).find(".the-buttons")
so that you only change the button in the hovered over div
otherwise you would change all of the .the-buttons
on the entire page! 此外,淡化
$(this).find(".the-buttons")
是非常重要的,这样你只需要更改悬停在div
的按钮,否则你会改变整个页面上的所有.the-buttons
! .find()
just looks for descendants. .find()
只是寻找后代。
Finally, .animate()
will work, but why not just use .fadeIn()
and .fadeOut()
? 最后,
.animate()
会起作用,但为什么不使用.fadeIn()
和.fadeOut()
?
JS: 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() !
});
});
HTML: - Something like this HTML: - 像这样的东西
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS: - Something like this. CSS: - 像这样的东西。 Yours will likely be different.
你的可能会有所不同。
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. 将图像和按钮放在同一个div中,然后将鼠标悬停/鼠标移动事件放在div上。 Than whether your mouse is over either the button or the image, it will still be over the div.
无论您的鼠标是在按钮还是图像上,它仍然会超过div。
Also I am not sure if mouseenter(...).mouseout(...)
will work. 此外,我不确定
mouseenter(...).mouseout(...)
是否有效。 I always use hover(..., ...)
我总是使用
hover(..., ...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.