Javascript jquerymouseover在div中重新排列类，然后用mouseleave重置

编辑- 可以找到正确的解决方案。偏离建议。我做了两个额外的类，它们复制了活动和非活动，但是有！重要财产

原创帖子

我是编码界的新手，想弄明白这一点简直是疯了。我发现并正在尝试修改发布在的此代码

加载时，我希望将.premium显示设置为“活动”，将.standard和.platinum显示设置为“非活动”。然后在mouseover（）上，重新排列类，以便鼠标移动到的对象将具有“活动”类，而其他对象具有“非活动”类。最后，当触发mouseleave（）时，将每个div重置为原始默认的active和inactive

HTML

CSS

.pen{
最大宽度：635px；
宽度：100%；
保证金：50px自动0；
不透明度：0；
位置：相对位置；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
-webkit动画：1向前显示1；
-moz动画：1向前显示1；
-o形动画：1向前显示1；
动画：1向前显示1；
}
.计划{
最大宽度：635px；
宽度：100%；
高度：400px；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
}
普朗迪斯先生{
宽度：202px；
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-ms转换来源：50%50%；
变换原点：50%50%；
身高：继承；
边际：0 7px 0；
显示：内联块；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.plandis.active{
宽度：282px；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
}
.plandis.inactive{
宽度：162px；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
不透明度：0.4；
}
普兰迪斯保险公司{
背景色：红色；
背景尺寸：封面；
}
.plandis.standard{
背景颜色：蓝色；
背景尺寸：封面；
}
普兰迪斯白金酒店{
背景颜色：绿色；
背景尺寸：封面；
}
.plandis：类型的最后一个{
保证金：0；
}
@介质和全部（最小宽度：900px）{
.笔{
最大宽度：890px；
}
普朗迪斯先生{
宽度：286px；
}
.plandis.inactive{
宽度：246px；
}
.plandis.active{
宽度：366px；
}
.计划{
最大宽度：890px；
高度：600px；
}
}
@全部和全部介质（最大宽度：660像素）{
.笔{
最大宽度：335px；
}
普朗迪斯先生{
宽度：101px；
}
.plandis.inactive{
宽度：61px；
}
.plandis.active{
宽度：181px；
}
.计划{
最大宽度：335px；
}
}
@-出现webkit关键帧{
15% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧出现{
15% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-此时将显示o关键帧{
15% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@出现关键帧{
15% {
不透明度：0；
}
100% {
不透明度：1；
}
}

JS

$（'.plandis'）。每个（函数（）{
$（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'）；
});
});

---

我多次尝试操作代码，但都没有成功。所以希望有人能帮助我

我提出的解决方案略有不同。我没有切换活动类和非活动类，而是添加了第三个类“ignore”

active的css规则已更改为同时检查元素是否没有

ignore

类。此外，如果元素处于

非活动状态，但处于悬停状态，则该元素应处于活动状态

此时，我们只需将ignore类添加到当前未悬停的任何活动元素中


var$allPlandis=$（'.plandis'）
.on（'mouseenter'，function（）{
$allPlandis.not（this.filter（'.active'）.addClass（'ignore'）；
})
.on（'mouseleave'，function（）{
$allPlandis.filter（'.ignore'）.removeClass（'ignore'）；
});
.pen{
最大宽度：635px；
宽度：100%；
保证金：50px自动0；
不透明度：0；
位置：相对位置；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
-webkit动画：1向前显示1；
-moz动画：1向前显示1；
-o形动画：1向前显示1；
动画：1向前显示1；
}
.计划{
最大宽度：635px；
宽度：100%；
高度：400px；
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-ms转换：所有0.25秒的缓进缓出；
-o型过渡：所有0.25秒缓进缓出；
过渡：所有0.25秒缓进缓出；
}
普朗迪斯先生{
宽度：202px；
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-ms转换来源：50%50%；
转变
.plandis.active:not(.ignore),
.plandis.inactive:hover {
}