Cancel transition of child element on hover of parent element?

I have a menu that consists of a submenu and then a slideshow (made with bxslider plugin) that displays when hovering over any particular submenu li. The slideshow fades in and fades out, but when I hover over a new submenu li after a slideshow is visible, the transitions overlap and prevents me from hovering over the new slideshow. Can I cancel an existing slideshow css transition when hovering over a new submenu li?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <link rel="stylesheet" type="text/css" href="css/featured.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
    <nav id="menu">
        <ul>
            <li>    
                <a href="#">articles</a>
                <div class="submenu">
                <ul>
                    <li>
                        <a href="#">diet</a>
                            <div class="featured" id="featuredDiet">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">history</a>
                            <div class="featured" id="featuredHistory">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">injuries</a>
                            <div class="featured" id="featuredInjuries">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">philosophies</a>
                            <div class="featured" id="featuredPhilosophies">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">physiology</a>
                            <div class="featured" id="featuredPhysiology">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">records</a>
                            <div class="featured" id="featuredRecords">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">schedules</a>
                            <div class="featured" id="featuredSchedules">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">training</a>
                            <div class="featured" id="featuredTraining">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                </ul>
                </div>
            </li>
            <li>    
                <a href="#">running news</a>
                <div class="submenu">
                <ul>
                    <li>
                        <a href="#">youth</a>
                            <div class="featured" id="featuredYouth">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">high school</a>
                            <div class="featured" id="featuredHighschool">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">collegiate</a>
                            <div class="featured" id="featuredCollegiate">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">professional</a>
                            <div class="featured" id="featuredProfessional">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">masters</a>
                            <div class="featured" id="featuredMasters">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">ultra</a>
                            <div class="featured" id="featuredUltra">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                    <li>
                        <a href="#">trail</a>
                            <div class="featured" id="featuredTrail">
                                <div class="bxslider">
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                    <div><a href="#"><img src="images/sample.jpg" title="." /></a>
                                        <span class="featuredCaption">sample caption</span></div>
                                </div>
                            </div>
                    </li>
                </ul>
                </div>
            </li>
            <li><a href="#">coaching</a></li>
            <li>    
                <a href="#">about</a>
                <div class="submenu">
                <ul>
                    <li><a href="#">me</a></li>
                    <li><a href="#">training logs</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
                </div>
            </li>
        </ul>
    </nav>
</head>
<body>
</body>

Menu CSS:

#logo {
    float: left;
}

#siteName {
    position: absolute;
    left: 26px;
    top: 165px;
    font-family: Helvetica;
    font-size: 18px;
}

#menu ul {
    display: inline-block;
    position: absolute;
    list-style: none;
    width: 220px;
}

#menu ul a {
    display: block;
    padding-left: 18px;
    padding-right: 10px;
    color: black;
    text-decoration: none;
    font-size: 26px;
    line-height: 36px;
    font-family: Helvetica;
    border-radius: 1px;
    transition: margin-left 0.4s ease 0s, border-radius 0.4s ease 0s, background 0.4s ease 0s, color 1s ease 0s;
}

#menu ul li {
    position: relative;
    border-left: solid red .5px;
}

#menu li:hover > a {
    background: black;
    color: white;
    border-radius: 7px;
    margin-left: 15%;
}

#menu li:hover .submenu ul {
    visibility: visible;
}

#menu ul ul {
    visibility: hidden;
    position: absolute;
    left: 83%;
    top: 0px;
    width: 65%;
    margin-left: 6%;
    background: none;
}

#menu ul ul a {
    line-height: 100%;
    font-size: 18px;
    padding: 8px;
}

Featured (slideshow) CSS:

.featured {
    visibility: hidden;
    position: absolute;
    left: 100%;
    width: 728px;
    height: 450px;
    opacity: 0;
    transition: all 2s ease 0s;
}

.featured .bxslider a {
    padding: 0 !important;
}

.featured:after, .featured:before {
    right: 99.5%;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0px;
    position: absolute;
    pointer-events: none;
}

.featured:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: black;
    border-width: 13px;
    margin-top: -13px;
}

.featured:before {
    border-color: rgba(0, 0, 0, 0);
    border-width: 17px;
    border-right-color: white;
    margin-top: -17px;
}

.submenu li:hover .featured {
    visibility: visible;
    opacity: 1;
}

.featuredCaption {
    position: absolute;
    color: #ffffff;
    font-family: Helvetica;
    font-size: 26px;
    bottom: 0;
    left: 0;
    padding: 10px;
    padding-left: 20px;
    z-index: 20;
}

    /* ARTICLES */

#featuredDiet {
    top: 0%;
}

#featuredDiet:after, #featuredDiet:before {
    top: 4%;
}

#featuredHistory {
    top: -100%;
}

#featuredHistory:after, #featuredHistory:before {
    top: 11.5%;
}

#featuredInjuries {
    top: -200%;
}

#featuredInjuries:after, #featuredInjuries:before {
    top: 19%;
}

#featuredPhilosophies {
    top: -300%;
}

#featuredPhilosophies:after, #featuredPhilosophies:before {
    top: 26.5%;
}

#featuredPhysiology {
    top: -400%;
}

#featuredPhysiology:after, #featuredPhysiology:before {
    top: 34%;
}

#featuredRecords {
    top: -500%;
}

#featuredRecords:after, #featuredRecords:before {
    top: 41.5%;
}

#featuredSchedules {
    top: -600%;
}

#featuredSchedules:after, #featuredSchedules:before {
    top: 49%;
}

#featuredTraining {
    top: -700%;
}

#featuredTraining:after, #featuredTraining:before {
    top: 56.5%;
}

    /* RUNNING NEWS */

#featuredYouth {
    top: -100%;
}

#featuredYouth:after, #featuredYouth:before {
    top: 11.5%;
}

#featuredHighschool {
    top: -200%;
}

#featuredHighschool:after, #featuredHighschool:before {
    top: 19%;
}

#featuredCollegiate {
    top: -300%;
}

#featuredCollegiate:after, #featuredCollegiate:before {
    top: 26.5%;
}

#featuredProfessional {
    top: -400%;
}

#featuredProfessional:after, #featuredProfessional:before {
    top: 34%;
}

#featuredMasters {
    top: -500%;
}

#featuredMasters:after, #featuredMasters:before {
    top: 41.5%;
}

#featuredUltra {
    top: -600%;
}

#featuredUltra:after, #featuredUltra:before {
    top: 49%;
}

#featuredTrail {
    top: -700%;
}

#featuredTrail:after, #featuredTrail:before {
    top: 56.5%;
}

你可以尝试像这样手动完成所有事情:

document.ready(fuction() {
$('.element1').hover(fuction() {
    $('.sideshow2, .slideshow3, .slideshow4').hide();
    $('.slideshow1').fadeIn();
});

$('.element2').hover(fuction() {
    $('.sideshow1, .slideshow3, .slideshow4').hide();
    $('.slideshow2').fadeIn();
});

$('.element3').hover(fuction() {
    $('.sideshow1, .slideshow2, .slideshow4').hide();
    $('.slideshow3').fadeIn();
});

$('.element4').hover(fuction() {
    $('.sideshow1, .slideshow2, .slideshow3').hide();
    $('.slideshow4').fadeIn();
});
});
链接地址: http://www.djcxy.com/p/27426.html

上一篇: 展开div来获取剩余宽度

下一篇: 取消父元素悬停时子元素的转换?