Javascript/jQuery mouseover和mouseout事件监听器

不知道如何解决我目前遇到的问题。我正在构建一个Javascript和PHP驱动的图像库。基本的div结构是，我有一个包含整个图库的div，一个用于显示图像，一个div包含“上一个按钮”，另一个包含“下一个按钮”。Javascript/jQuery mouseover和mouseout事件监听器

下一个/上一个按钮位于图像容器div底部的左侧/右侧（图库容器设置为相对位置，按钮div为绝对）。默认情况下，它们使用jQuery不可见，并且当您将鼠标悬停在图像容器div上时变为可见。我遇到的问题是，当您将鼠标悬停在容器div上，然后通过箭头时，过渡效果会重新播放，而我不确定如何使用HTML/CSS/JS来修复该问题。我对目前的div结构

<div id="galleryContainer"> 
    <div id="imageContainer"> 
    <img src="img" /> 
    </div> 
    <div id="leftArrow"></div> 
    <div id="rightArrow"></div> 
</div>

我如何使它所以我的淡入/淡出效果停止作用，当我将鼠标悬停在下一/上一个按钮，所有的窃听？我尝试了一些使用“onmouseover”侦听器的组合，当我建立div时，使用jQuery侦听器，试图改变drivs的层次结构。任何帮助，将不胜感激！

编辑：这是我想要做我当前的jQuery代码：

$(document).ready(function(){ 

$("#imageContainer").mouseover(function() 
{ 
    $("#leftArrow").fadeIn(); 
    $("#rightArrow").fadeIn(); 
}); 

$("#galleryContainer").mouseout(function() 
{ 
    $("#leftArrow").fadeOut(); 
    $("#rightArrow").fadeOut(); 
}); 
});

当我把按钮它仍然没有褪色的bug /效果imageContainer内。

来源

2012-05-11 Brandon.B

哪里是你的代码中发生的处理程序叫什么名字？ –

是的，您可以添加您的JavaScript代码和任何相关的CSS吗？ – carols10cents

如果您可以在www.jsFiddle.net上复制问题，那么我们最容易为您提供帮助。 –

你可能想使用$.mouseleave和$mousenter一问题在于mouseout和mouseover事件冒泡。然后，当这些事件上#galleryContainer发射时，它在它的任何继承

http://jsfiddle.net/z2Y8a/20/

$("#imageContainer").mouseenter(function() { 
    $("#leftArrow").fadeIn(); 
    $("#rightArrow").fadeIn(); 
}); 

$("#galleryContainer").mouseleave(function() { 
    $("#leftArrow").fadeOut(); 
    $("#rightArrow").fadeOut(); 
});

来源

2012-05-11 21:39:35

谢谢！ $ .mouseleave事件监听器正是我所需要的！ –

您还应该使用'$ .mouseenter'，因此当您将鼠标移动到图像上时，它不会尝试淡入。你什么都看不到，但你仍然在浪费周期 –

这就是我没有看到任何代码解释你的问题。让我知道。
我给div添加了颜色，所以你可以看到哪个位置。

的jsfiddle：http://jsfiddle.net/z2Y8a/19/

<div id="galleryContainer" style="width:200px;height:200px;background:green;"> 
    <div id="imageContainer" style="width:50px;height:100px;background:blue;"> 
     <div style="height:75px;"> 
      <img src="img" /> 
     </div> 
     <div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div> 
     <div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div> 
    </div> 
</div> 

<script> 
    $("#imageContainer").hover(function() 
    { 
     $("#leftArrow").toggle(); 
     $("#rightArrow").toggle(); 
    }); 
</script>

- 编辑 -

$("#galleryContainer").hover(function() 
{ 
    $("#leftArrow").toggle(); 
    $("#rightArrow").toggle(); 
});

来源

2012-05-11 20:41:46

将我的代码添加到原始问题 –

@LeonP编辑了我的答案，这应该可以解决您的问题。不要忘记接受解决问题的答案:) –

如果你的箭是你的形象容器内它不会闪烁。或者，也可以在主图库容器中放置显示箭头效果。基本上，当你的鼠标放置图像容器时，它会触发鼠标移出。当我说离开我的意思是在代码感，视觉上不会离开，因为你拥有它定位不同，但在代码的意义，您的鼠标离开图像容器并进入箭头集装箱

来源

2012-05-11 21:02:08 Huangism

Javascript/jQuery mouseover和mouseout事件监听器

回答

相关问题