我想顯示/隱藏懸停的div。我的代碼適用於列表中的第一項,但不適用於其他項。 http://codepen.io/adamin/pen/yHcni多次懸停toggleClass只能工作一次
HTML
<div id="track" class="ani" name="#tomday">
<h1>listen</h1>
<h2>who we want to be</h2>
</div>
<div id="track" class="ani" name="#next">
<h1>next</h1>
<h2>thing</h2>
</div>
<div class="clear"></div>
<div id="tomday" style="" class="video off"></div>
<div id="next" style="" class="video off"></div>
CSS
.off {
display:none;
}
.on {
display:block;
}
.clear:after {
clear:both;
}
.ani {
transition:1s;
}
.invisible {
color:transparent;
}
#track {
margin:12% 1% 1% 1%;
height:12%;
width:12%;
color:rgba(211, 50, 9, 0.05);
float:left;
}
#track:hover {
margin-top:15%;
color:rgba(211, 50, 9, 1)
}
.video {
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:-1;
background:red;
opacity:0.5;
}
jQuery的
$("#track").hover(function() {
var thisvideo = $(this).attr('name');
$(thisvideo).toggleClass("on");
});
你不能再使用的ID(#track),使用一個類來代替。 –
非常感謝:) – user3533484