multitour toggleClass ne fonctionne qu'une seule fois

Question

J'essaie d'afficher/masquer un div sur hover. mon code fonctionne sur le premier élément de la liste, mais pas sur les autres. 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

Dans votre jquery, il suffit de remplacer #track par .ani pour utiliser la classe de l'élément.

Answer 2

changement

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

Tout id doit être unique. Si vous voulez l'utiliser dans plusieurs endroits font juste une classe au lieu;)

Voici votre démo 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"); 
});