Jquery 根据按钮的切换状态切换悬停

如果单击了

maincirle

，我希望它看起来很压抑，这就是为什么

maincirle:active

没有

框阴影的原因。但是，当我将鼠标悬停在单击的
main圆圈上时，我不希望出现悬停样式（即，无
框阴影
）。我尝试了
$（this）.unbind（'mouseenter'）.unbind（'mouseleave'）
&一个if语句，用于检查是否使用
data（）
函数单击了
maincirle
，并使用
toggleClass（）
切换了
框阴影。然而，所有这些解决方案都被证明是徒劳的，我正在努力寻找一种方法来解决这个问题。下面是有问题的代码：

下面是问题的GIF图（当单击主圆，然后将其悬停在上方时，它仍然有一个方框阴影）：



$（文档）.ready（函数（）{
$（“.subOne”）.hide（）；
$（“.subTwo”）.hide（）；
$（“.subThree”）.hide（）；
$（“.subfur”）.hide（）；
$（“.maincycle”）.bind（'click'，function（）{
$（this.toggleClass（'shadow'）；
$（“.subOne”）。滑动切换（250）；
$（“.subTwo”）。滑动切换（250）；
$（“.subThree”）。滑动切换（250）；
$（“.subfur”）.slideToggle（250）；
$（“.subOne”）.toggleClass（'activeOne'）；
$（“.subTwo”）.toggleClass（'activeTwo'）；
$（“.subThree”）.toggleClass（'activeThree'）；
$（“.subfur”）.toggleClass（'activeFour'）；
});
$（“.subOne”）.bind（'click'，function（）{
$（'.maincirle'）.toggleClass（'callBackground'）；
$（'.subTwo'）.toggleClass（'downBackground'）；
$（'.subThree'）.toggleClass（'hangUpBackground'）；
$（“.subThree”）.bind（'click'，function（）{
$（this.toggleClass（'subThreeHangUp'）；
});
$（“.maincycle”）.bind（'click'，function（）{
$（this.toggleClass（'mainCirlecall'）；
$（this.css（'border'，'2px red solid'））
});
});
});
正文{
保证金：0；
}
.集装箱{
位置：相对位置；
}
.分包商{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
背景：白烟；
}
mainCircle先生，
苏伯恩先生，
.subTwo，
.次三级，
.子文件夹{
高度：100px；
宽度：100px；
边界半径：100px；
盒影：4px 3px 10px黑色；
过渡：0.3s缓解所有；
}
梅因Circle先生{
宽度：150px；
高度：150像素；
背景：4286f4；
背景图像：url（“https://i.ibb.co/M9C94Gf/Aws1Fer.png");
背景位置：-10px-7px；
背景大小：100%100%；
}
苏伯恩先生{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景图像：url（“https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02-298x300.png");
背景大小：95%95%；
背景位置：中心；
不透明度：1；
过渡：0.3s缓解所有；
}
.subTwo{
位置：绝对位置；
底部：50%；
左：50%；
转换：翻译（-50%，50%）；
背景图像：url（“https://bocarecoverycenter.com/wp-content/uploads/2016/07/Pain_Killer_Addiction_Rehab.png");
背景大小：100%100%；
背景位置：中心；
过渡：0.3s缓解所有；
}
.次三线{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景图像：url（“https://www.humankind.org/wp-content/uploads/2018/08/ems-icon-doing-cpr-e1534816990562.png");
显示：可见；
背景大小：100%100%；
背景位置：中心；
过渡：0.3s缓解所有；
}
.子文件夹{
位置：绝对位置；
最高：50%；
右：50%；
转换：翻译（50%，-50%）；
背景图像：url（“https://image.flaticon.com/icons/svg/9/9895.svg");
背景大小：100%100%；
背景位置：中心；
过渡：0.3s缓解所有；
}
.main循环：活动{
盒影：无；
不透明度：0.8；
过渡：0.3s缓解所有；
变换：比例（0.9）；
}
.activeOne{
最高：20%；
不透明度：1；
过渡：0.3s缓解所有；
}
.活动二{
最高：65%；
}
.主动三号{
左：20%；
}
.activeFour{
右：20%；
}
.影子{
盒影：无；
}
.callBackground{
背景图像：url（'https://cdn0.iconfinder.com/data/icons/web-and-marketing-glyph/64/web-and-marketing-glyph-04-512.png');
背景大小：80%80%；
背景重复：无重复；
背景位置：中心；
}
.callBackground:悬停{
背景图片：url(https://www.falconemergency.com/wp-content/themes/falcon/images/call3.gif);
背景大小：120%120%；
背景重复：无重复；
背景位置：中心；
背景色：白色；
边框：2个绿黄色实心；
}
.mainCircleCall{
背景图片：url(https://www.falconemergency.com/wp-content/themes/falcon/images/call3.gif);
背景大小：120%120%；
背景重复：无重复；
背景位置：中心；
背景色：白色；
边框：2个绿黄色实心；
}
.背景{
背景图像：url（'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmhE2xQpAQ5Zui-0KXRIzEiEvlqjt_ZoojTb9P5d7TU80PP4GHqw'）；
动画：上下移动1s线性无限；
位置：绝对位置；
左：0；
左边距：50%；
保证金权利：50%；
}
@关键帧向上向下移动{
0% {
变换：translateY（0）；
}
25% {
转换：translateY（3px）；
}
50% {
转换：translateY（-3px）；
}
75% {
transform:translateY（-6px）；
}
100%{
变换：translateY（0）；
}
}
.悬空背景{
背景图片：url(https://png.pngtree.com/svg/20170310/ab2d1aa29d.svg);
背景大小：80%80%；
背景重复：无重复；
背景位置：中心；
}
.悬挂背景：悬停{
背景图片：url(https://i.pinimg.com/originals/dd/eb/db/ddebdb230c1193f2593cae1140b24e49.gif);
背景大小：160%160%；
背景重复：无重复；
背景位置：中心；
}
.阈下语言{
背景图片：url(https://i.pinimg.com/originals/dd/eb/db/ddebdb230c1193f2593cae1140b24e49.gif);
背景大小：160%160%；
背景重复：无重复；
背景位置：中心；
}
.mainCircle:非（.shadow）：悬停{
盒影：4px 3px 5px黑色；
光标：指针；
不透明度：0.8；
过渡：0.3s缓解所有；
}

.main循环：不（：活动）：