不知道如何解决我目前遇到的问题。我正在构建一个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>
当我将鼠标悬停在下一个/上一个按钮上时,我怎么做到这样我的fadein / out效果就会停止动作?当我建立div,使用jQuery监听器,试图改变驱动器的层次结构时,我尝试了一堆使用“onmouseover”监听器的组合。任何帮助将不胜感激!
编辑:这是我目前正在尝试做的jQuery代码:
$(document).ready(function(){
$("#imageContainer").mouseover(function()
{
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseout(function()
{
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
});
当我将按钮放在imageContainer中时,它仍会执行淡入淡出/效果。
答案 0 :(得分:1)
您可能想要使用$.mouseleave和$mousenter问题是mouseout和mouseover事件会冒泡。然后,当#galleryContainer在其任何后代中发生这些事件时,会调用您的处理程序
$("#imageContainer").mouseenter(function() {
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseleave(function() {
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
答案 1 :(得分:0)
这就是我在没有看到任何代码的情况下解释您的问题的方式..让我知道 我为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();
});
答案 2 :(得分:0)
如果您的箭头位于图像容器内,它不会闪烁。或者可以将show arrow效果放在主库容器中。基本上当你的鼠标拉动图像容器时,它会触发mouseout。当我说离开时我的意思是在代码意义上,在视觉上它不会离开,因为你有不同的位置,但在代码意义上,你的鼠标离开图像容器并输入箭头容器