javascript - 幻灯片顶部的菜单故障

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>