代码之家 › 专栏 › 技术社区 › sarsnake

幻灯片顶部的菜单故障

onmouseover slideshow css javascript

0

sarsnake · 技术社区 · 14 年前

我已执行以下设置(在被请求后):

幻灯片显示的图像发生变化,用户鼠标悬停后,菜单将出现在右上角,鼠标悬停时会消失。问题是,当我试图将鼠标移到菜单项上时,菜单出现了小故障,它同时出现在IE6/7和FF 3.5中。

我尝试过jquery hover、mouseenter/mouseleave,都有相同的结果。 http://www.codecookery.com/test/index.html

有没有可能让它一点也不浮华?

1 回复 | 直到 14 年前

1

0

graphicdivine 14 年前

你最好使用.悬停而不是.mouseenter/leave。

然而,真正的问题是,菜单在SlideShowWrapper之外,所以将鼠标悬停在菜单上就等于离开了SlideShowWrapper。将HTML更改为以下内容,将菜单嵌套在SlideShowWrapper中,然后恢复为使用.hover函数::

<div id="slideshow-wrapper">
    <div id="slideshow">
        <img src="images/image1.jpg" alt="Slideshow Image 1" class="active" />
        <img src="images/image2.jpg" alt="Slideshow Image 2" /> 
        <img src="images/image3.jpg" alt="Slideshow Image 3"  /> 
        <img src="images/image4.jpg" alt="Slideshow Image 4"  /> 
    </div>

    <div id="main-menu">
        <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">store</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>    
                <li><a href="#">login</a></li>  
        </ul>   
     </div>
</div>