多个悬停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");
});