[英]addClass transition doesn't work
似乎是一個常見的問題,但到目前為止我找到的答案都沒有工作。一切似乎都是一個非常標准和簡單的代碼,但卻無法讓該死的東西發揮作用。 制作一個下拉菜單,我需要一個隱藏的ul在懸停時緩慢顯示。
它的HTML
<div class="main-nav">
<ul>
<li>
<a href="wtvr">Title</a>
<ul class="dropedmainnav t50 ">
<li class="subnavli" style="position:relative;">
<div class="superimage" style="position:absolute; right:-100%;">
<img src="" alt="{{link.handle}}">
</div>
</li>
<li class="t50 subnavli">
<a href="wtvr">Subnav link</a>
</li>
<div class="subnavsides"></div>
</ul>
</li>
</ul>
</div>
js of it
$(".main-nav ul li").each(function(){
$(this).mouseover(function(){$(this).find("ul").addClass("dropedunderul");});
$(this).mouseleave(function(){$(this).find("ul").removeClass("dropedunderul"); });
$(this).find("ul").mouseover(function(){$(this).addClass("dropedunderul");});
$(this).find("ul").mouseleave(function(){$(this).removeClass("dropedunderul");});
});
和css
.t50 {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.dropedmainnav {display:none; padding:15px 0 10px 0; overflow:hidden;width:500px; }
.dropedunderul {display:table !important; min-height:150px; border-top:2px solid transparent; z-index:2; }
.main-nav ul li {position:relative;}
.main-nav ul li ul {position:absolute;background-color:rgba(255,255,255,0); overflow:visible;}
.main-nav ul li ul li {float:none !important; text-align:left !important;}
我認為這是關於相關風格的。 我也試過將轉換專門添加到.dropedmainnav,.dropedunderul,我嘗試使用內聯樣式。
我不確定你用$ .each()做了什么,在每個鼠標進入/離開事件上調用一個函數並讓它淡入/淡出是不是更簡單:
$(".main-nav ul li").mouseenter(function() {
$(this).children('dropedmainnav').fadeIn(500);
}
}).mouseleave(function() {
$(this).children('dropedmainnav').fadeOut(500);
}
});
不確定你究竟想要實現什么,但你當然可以擺脫所有這些jQuery大驚小怪。 所有動畫和鼠標懸停效果都可以通過CSS(使用:hover
)完成。 試試下面的代碼段,如果與您想要的內容無關,請隨時發表評論。
body { font-family: arial; } .onhover {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} li .onhover { height: 0; width: 200px; overflow: hidden; border: 1px solid transparent; } li:hover .onhover { height: 20px; border-color: #ccc; }
<div> <ul> <li> <div>Item 1</div> <div class="onhover">You are hovering item 1</div> </li> <li> <div>Item 2</div> <div class="onhover">You are hovering item 2</div> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.