[英]jQuery :hover Div to reveal Sibling
I have the following in jQuery我在 jQuery 中有以下内容
// Larger sidebar images fades in on :hover
$("#left_sidebar .img_contain").hover(function(){
$(this).find(".larger_img").fadeIn("slow");
$(this).find(".larger_img").fadeOut("slow");
});
With the following HTML与以下 HTML
<div class="img_contain">
<img width="160" height="240" src="/smaller.jpg">
<div class="larger_img" style="display: none; ">
<img width="300" height="450" src="/larger.jpg">
</div>
</div>
The idea here is that on:hover the hidden .larger_img
div should fade in. The code works as expected but has a quirk - when hovering the .larger_img
div successfully fades in but immediately fades out.这里的想法是 on:hover 隐藏的
.larger_img
div 应该淡入。代码按预期工作,但有一个怪癖 - 当悬停.larger_img
div 成功淡入但立即淡出。 My intention here is that the .larger_img
div remains visible as long as the .img_contain
div is:hovered.我的意图是,只要
.img_contain
div 处于:悬停状态, .larger_img
div 就会保持可见。
Help?帮助?
I think this is your intention:我认为这是你的意图:
$("#left_sidebar .img_contain").hover(function(){
$(this).find(".larger_img").fadeToggle("slow");
});
You are both fading in and fading out the same element upon each mouseover and mouseout.每次鼠标悬停和鼠标移出时,您都会淡入和淡出相同的元素。 You need to either:
您需要:
1 - Separate both fade operations into two functions: 1 - 将两个淡入淡出操作分成两个功能:
$("#left_sidebar .img_contain").hover(function(){
$(this).find(".larger_img").fadeIn("slow");
}, function() {
$(this).find(".larger_img").fadeOut("slow");
});
2 - Use a toggling method or technique within the 'single function' version of the .hover
event handler. 2 - 在
.hover
事件处理程序的“单一功能”版本中使用切换方法或技术。 (as in the first snippet). (如在第一个片段中)。
Change your JavaScript to this:将您的 JavaScript 更改为:
$("#left_sidebar .img_contain").hover(
function() {$(this).find(".larger_img").fadeIn("slow");},
function() {$(this).find(".larger_img").fadeOut("slow");}
);
You are not doing the hover properly.您没有正确执行 hover。
However the following code is much more smooth and optimized:但是,以下代码更加流畅和优化:
$("#left_sidebar .img_contain").hover(
function() {$(".larger_img",this).stop(true, true).fadeIn("slow");},
function() {$(".larger_img",this).stop(true, true).fadeOut("slow");}
);
$(".img_contain").hover(function(){
$(this).find(".larger_img").fadeIn("slow");
},function(){
$(this).find(".larger_img").fadeOut("slow");
})
generally .hover
takes two functions.一般
.hover
有两个功能。 It can take one, which serves as both the hover on and hover off function.它可以作为 hover on 和 hover off function 使用。 That is why you see it both fade in and out twice.
这就是为什么您会看到它两次淡入淡出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.