当前位置：文江博客话题详情

幻灯片顶部的菜单出现故障

发布于 2024-08-28 03:27:07 字数 328 浏览 7 评论 0原文

我已经实现了以下设置（在被请求后）：

图像变化的幻灯片，用户将鼠标悬停后，菜单将出现在右上角，鼠标移开时它将消失。问题是，当我尝试将鼠标悬停在其项目上时，菜单出现故障，在 IE6/7 和 FF 3.5 中都会发生这种情况。

我尝试过 Jquery 悬停、mouseenter/mouseleave，都得到相同的结果。 http://www.codecookery.com/test/index.html

可能吗让它完全没有故障？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九八野马 2024-09-04 03:27:07

使用 .hover 比 .mouseenter/leave 更好。

但真正的问题是菜单位于幻灯片包装器之外，因此将鼠标悬停在菜单上将被视为离开幻灯片包装器。将 html 更改为以下内容，将菜单嵌套在幻灯片包装器中，然后恢复使用 .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>

You're better off using .hover than .mouseenter/leave.

The real problem, though, is that the menu is outside the slideshowwrapper, so hovering over the menu counts as leaving the slideshowwrapper. Change your html to the following, nesting the menu in the slideshowwrapper, and revert to using the .hover function::

<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>

回复收藏 0 原文

~没有更多了~