我正在制作一组照片/文字。除了第一个面板在页面加载时具有活动类之外,所有面板上都将具有叠加层颜色,该颜色会删除该叠加层。当您将鼠标悬停在第二个/第三个etc面板上时,overlay active类将从第一个面板上删除,然后转到已悬停的那个类上。
现在,它仅在页面加载时才有效,我似乎无法将类从第一个div移到第二个div上。
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/
最佳答案
无需为此使用JavaScript或jQuery。最好在CSS中使用:hover
伪选择器。今天也要容易得多。
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
如果您坚持使用jQuery,可以尝试一下
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
这种方法虽然不被接受
关于javascript - 悬停时删除和添加类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35734972/