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();
});
});
上一篇: 展开div来获取剩余宽度
下一篇: 取消父元素悬停时子元素的转换？