Question

我已经实施了以下设置（请求后）：

幻灯片显示图片发生变化，用户将鼠标移开后，菜单会出现在右上角，鼠标移出时会消失。问题是，当我尝试将鼠标悬停在其项目上时，菜单很奇怪，它发生在IE6 / 7和FF 3.5中。

我尝试过Jquery hover，mouseenter / mouseleave，结果相同。 http://www.codecookery.com/test/index.html

是否有可能让它完全没有毛刺呢？

Answer 1

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

但真正的问题是，菜单位于幻灯片包装器之外，因此将鼠标悬停在菜单上就像离开幻灯片包装器一样。将您的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>

幻灯片顶部的菜单故障

1 个答案: