多次悬停toggleClass只能工作一次

Question

我想显示/隐藏悬停的div。我的代码适用于列表中的第一项，但不适用于其他项。 http://codepen.io/adamin/pen/yHcni

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"); 
}); 

Answer 1

在你的jQuery，只是.ANI使用的类元素的替代#track。

Answer 2

变化

<div class="track" class="ani" name="#tomday"> 
     <h1>listen</h1> 
     <h2>who we want to be</h2> 
    </div> 
    <div class="track" class="ani" name="#tomday"> 
     <h1>listen</h1> 
     <h2>who we want to be</h2> 
    </div> 
    <div class="clear"></div> 
    <div id="tomday" 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;} 

JS：

$(".track").hover(function() { 
      var thisvideo = $(this).attr('name'); 
      $(thisvideo).toggleClass("on"); 
     }); 

任何ID必须是唯一的。如果你想在多个地方使用它，使它成为一个类来代替;）

这是你的演示http://codepen.io/anon/pen/eLruh

Answer 3

Demo

HTML

<div id="track" class="ani" name="#tomday"> 
     <h1>listen</h1> 
     <h2>who we want to be</h2> 
</div> 
<div id="track2" 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, #track2 { 
    margin:12% 1% 1% 1%; 
    height:12%; 
    width:12%; 
    color:rgba(211, 50, 9, 0.05); 
    float:left; 
} 
#track:hover, #track2: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的

$(".ani").hover(function() { 
    var thisvideo = $(this).attr('name'); 
    $(thisvideo).toggleClass("on"); 
});