菜单上的幻灯片

Question

的顶部出问题我已实现了以下设置（被请求后）：改变图像的

幻灯片，当用户鼠标，菜单将出现在右上角，它会消失在鼠标外面。问题是，当我尝试将鼠标滑过它的项目时，菜单出现问题，它发生在IE6/7和FF 3.5中。

我试过Jquery hover，mouseenter/mouseleave，所有结果都一样。 http://www.codecookery.com/test/index.html

是否有可能使它不毛刺呢？

Answer 1

你最好使用.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>