不知道如何解决我目前遇到的问题。我正在构建一个 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>
当我将鼠标悬停在下一个/上一个按钮上时,如何使我的淡入/淡出效果停止运行?当我建立 div 时,我尝试了一系列使用“onmouseover”监听器的组合,使用 jQuery 监听器,试图改变驱动器的层次结构。任何帮助,将不胜感激!
编辑:这是我目前正在尝试做的 jQuery 代码:
$(document).ready(function(){
$("#imageContainer").mouseover(function()
{
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseout(function()
{
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
});
当我将按钮放在 imageContainer 内时,它仍然会出现淡入淡出错误/效果。