0

不知道如何解决我目前遇到的问题。我正在构建一个 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 内时,它仍然会出现淡入淡出错误/效果。

4

3 回答 3

1

您可能想要使用$.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-11T21:39:35.600 回答
0

This is how I interpreted your question without seeing any code.. Let me know.
I added colors to the divs so you can see which is located where.

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>

-- EDIT --

$("#galleryContainer").hover(function()
{
    $("#leftArrow").toggle();
    $("#rightArrow").toggle();
});
于 2012-05-11T20:41:46.883 回答
0

如果您的箭头在图像容器内,它不会闪烁。或者也许将显示箭头效果放在主画廊容器中。基本上,当您的鼠标固定图像容器时,它会触发鼠标移出。当我说离开时,我的意思是在代码意义上,在视觉上它不会离开,因为你的位置不同但在代码意义上,你的鼠标离开了图像容器并进入了箭头容器

于 2012-05-11T21:02:08.090 回答