【发布时间】：2019-09-20 17:00:17
【问题描述】：
编辑 - 可以在here 找到正确的解决方案。放弃Taplar's 的建议。我制作了两个额外的类，它们复制了活动和非活动但具有 !important 属性。
原帖
我是编码界的新手，想弄清楚这一点我快疯了。我发现并正在尝试修改发布在Codepen 的这段代码。
在加载时，我希望 .premium 显示为“活动”，而 .standard 和 .platinum 显示为“非活动”。然后在 mouseover() 上，重新排列类，使鼠标悬停的类具有“活动”类，而其他类“非活动”。最后，当 mouseleave() 被触发时，将每个 div 重置为原始默认活动和非活动。
HTML
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
CSS
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color:red;
background-size: cover;
}
.plandis.standard {
background-color:blue;
background-size: cover;
}
.plandis.platinum {
background-color:green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
@media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
@media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
@-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('active');
$('.plans').children('.plandis').not('.active').addClass('inactive');
});
$(this).mouseleave(function() {
$(this).removeClass('active');
$('.plans').children('.plandis').not('.active').removeClass('inactive');
});
});
我曾多次尝试操作代码，但无济于事。所以希望有人能够帮助我！
【问题讨论】：
-
每次鼠标移动到元素上都会触发鼠标悬停，这很可能是不必要的工作。你很可能想要 mouseenter 代替。
-
感谢您的快速响应！不幸的是，如果其他 div 中的任何一个首先被 mouseentered 并且在 mouseleave 上都失去活动和非活动状态，这不会从 .premium div 中删除活动。这是您的建议的codepen。
-
请记住，我并没有提供解决方案的建议。只是关于您尝试采用的方法的性能问题的建议。
-
啊，我明白了，谢谢你的建议。我已经进行了相应的编辑。
标签： javascript jquery html css ajax