Question

如果只悬停一个，则具有相同类名的div都会翻转。只是悬停的div应该翻转而不是所有具有相同类名的div。需要调整JQuery代码休息一切都很好。因此，只需要更改活动div，而不是所有具有相同名称的类。

<div class="card col-lg-2 col-md-2 block1 ">
    <div class="content">
        <div class="cardFront">
            <br>    
            <h1>Front Content</h1>
        </div>
        <div class="cardBack">BACK CONTENT</div>
    </div> 
</div>

<div class="card col-lg-2 col-md-2 block2 ">
    <div class="content div2">
        <div class="cardFront">
            <br>    
            <h1>Front Content</h1>
        </div>
        <div class="cardBack">BACK CONTENT</div>
    </div>
</div>

CSS：

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    width:200px;
    height:180px;
    display:block;
    margin: 0 0 20px 28px; 
    padding: 0 0 20px 0;
    text-align: center;
    color: white;

}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
background-image:url('../images/back10.png'); 
background-color: #961B1D; 
}

.card .content .cardBack {
background-color: #961B1D; 

}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;

}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

JS：

$('.card').hover(function(){
    $('.card').toggleClass('applyflip');
    }.bind(this));

Answer 1

只需将$('.card')替换为$(this)即可获取当前元素

$('.card').hover(function(){
    $(this).toggleClass('applyflip');
});

你不需要也不应该bind(this)。 jQuery为你做到了。

Answer 2

你必须在你的函数中使用“this”来说明你的意思。

$('.card').on("hover", function(){
    $(this).toggleClass('applyflip');
});

只翻转一个DIV而不是同一个类

2 个答案: