如何使悬停效果在取消悬停图像后保持不变

Question

我做了一个JS Fiddlehttps://jsfiddle.net/t3zaskum/为了更好地展示它，我试图使用jscript使项目在悬停时上升一点，但它就是不起作用。

Javascript：

$('.cover-img').mouseover(function() {
if ($(this).hasClass('active')) return;
$('.active').removeClass('active');
$(this).addClass('active');
});

CSS：

.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: center;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
}
.active {
top: -30px;
transition: all 0.5s ease
}
.cover-title {
font-weight: bold;
}
.hover-cover-middle:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
.hover-cover-left:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
.hover-cover-right:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}

提前感谢

Answer 1

HTML很好，JS很好，唯一的是：

.top-section-hover img-比.active更具体。所以我们总是看到.top-section-hover img的一种风格。

将.active更改为.top-section-hover img.active，使该块更加具体，因此应用规则

$('.cover-img').mouseover(function() {
if ($(this).hasClass('active')) return;
$('.active').removeClass('active');
$(this).addClass('active');
});

.top-section-hover {
display: flex;
padding-top: 10em;
justify-content: center;
flex-grow: 2;
text-align: center;
text-transform: uppercase;
font-weight: bold;
max-width: 96%;
}
.top-section-hover img {
position: relative;
top: 0;
transition: top ease 0.5s;
left: 0;
}
.top-section-hover img.active {
top: -30px;
transition: all 0.5s ease
}
.cover-title {
font-weight: bold;
}
.hover-cover-middle:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
.hover-cover-left:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}
.hover-cover-right:hover .cover-title {
color: white;
border-bottom: 3px solid white;
transition: 0.5s all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-section-hover">
<span class="hover-cover-left">
<a href="#" class="cover-left-content">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="" class="cover-img">
<span class="cover-title">Office</span>
</a>
</span>

<span class="hover-cover-middle">
<a href="#" class="cover-left-content">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="" class="cover-img">
<span class="cover-title">Home</span>
</a>
</span>

<span class="hover-cover-right">
<a href="#" class="cover-left-content">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="" class="cover-img">
<span class="cover-title">Events</span>
</a>
</span>
</div>