Javascript / jQuery mouseover和mouseout事件监听器 [英] Javascript/jQuery mouseover and mouseout Event Listeners

问题描述

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

下一个/上一个按钮位于图像容器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> 
  

当我将鼠标悬停在下一张图片上时，我的淡入/淡出效果是否会停止/ prev按钮？我尝试了一些使用onmouseover侦听器的组合，当我建立div时，使用jQuery侦听器，试图改变drivs的层次结构。任何帮助，将不胜感激！

编辑：这是我目前的jQuery代码，我想要做什么：

  $（document）.ready（function（）{
 
 $（＃imageContainer）。mouseover（function（）
 {$ fadeIn（）; 
 $（＃rightArrow）。fadeIn（）; 
}）; 
 
 $（＃rightArrow （）; 
 $（＃leftArrow）。fadeOut（）; 
 $（＃rightArrow）。fadeOut（）; 
 }）; 
}）; 
  

当我将这些按钮放在imageContainer中时，它仍然会执行淡入淡出效果。

解决方案

您可能想要使用 $。mouseleave 和 $ mousenter 问题在于mouseout和mouseover事件冒泡。然后，当这些事件发生在#galleryContainer中时，它的任何后代都会触发你的处理程序。

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

  $（＃imageContainer）。mouseenter（function（）{
 $（＃leftArrow）。fadeIn（）; 
 $（＃rightArrow）。fadeIn（）; 
}）; （）＃
 $（＃galleryContainer）。 fadeOut（）; 
}）; 
  

Not sure how to solve an issue I'm having at the moment. I'm building a Javascript and PHP powered image gallery. The basic div structure is that I have a div that contains the gallery as a whole, one for the image being displayed, and a div containing a "previous button", and another containing a "next button."

The next/previous buttons are positioned on the left/right side at the bottom of the image container div (the gallery container is set to relative position, the button divs to absolute). By default they are made non-visible using jQuery, and become visible when you hover over the image container div. The issue I'm having is when you hover over the container div, and then over the arrows, the transition effect re-plays and I'm not sure how to fix that using HTML/CSS/JS. My current structure for the divs is

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

How do I make it so my fadein/out effect stops acting all bugged when I hover over the next/prev buttons? I've tried a bunch of combinations of using "onmouseover" listeners when I establish the div, to using jQuery listeners, to trying to change up the hierarchy of the drivs. Any help would be appreciated!

Edit: Here is my current jQuery code of what I'm trying to do:

$(document).ready(function(){

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

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

When I put the buttons inside of the imageContainer it still does the fade bug/effect.

解决方案

You probably want to use $.mouseleave and $mousenter A problem is that the mouseout and mouseover events bubble. Then, your handlers are called when those events are fired on #galleryContainer when it happens in any of its descendants

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

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

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

这篇关于Javascript / jQuery mouseover和mouseout事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！