简体   繁体   中英

Menu glitchy on top of slideshow

I have implemented the following set up (after being requested):

slideshow of images changing, after the user mouse over, the menu would appear in the top right corner, it would disappear on mouse out. The problem is that the menu is glitchy when I try to mouseover its items, it happens in both IE6/7 and FF 3.5.

I have tried Jquery hover, mouseenter/mouseleave, all with the same result. http://www.codecookery.com/test/index.html

is it possible to make it not glitchy at all?

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM