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

Question

如果单击mainCircle，我希望它看起来很沮丧，这就是.mainCircle: active没有box-shadow时的原因。但是，当我将鼠标悬停在单击的mainCircle上时，我不希望出现悬停样式（即，没有box shadow）。我已经尝试过$(this).unbind('mouseenter').unbind('mouseleave')和一个if语句，该语句使用mainCircle函数检查是否单击了data()，并使用box-shadow来切换toggleClass()。但是，所有这些解决方案都被证明是徒劳的，我正努力寻找解决问题的方法。这是有问题的代码：

这是问题的GIF（当单击mainCircle，然后将其悬停时，它仍然具有框阴影）：

$(document).ready(function(){

	$(".subOne").hide();
	$(".subTwo").hide();
	$(".subThree").hide();
	$(".subFour").hide();


$(".mainCircle").bind('click',function(){

	$(this).toggleClass('shadow');
	$(".subOne").slideToggle(250);
	$(".subTwo").slideToggle(250);
	$(".subThree").slideToggle(250);
	$(".subFour").slideToggle(250);

	$(".subOne").toggleClass('activeOne');
	$(".subTwo").toggleClass('activeTwo');
  $(".subThree").toggleClass('activeThree');
	$(".subFour").toggleClass('activeFour');

});

$(".subOne").bind('click',function(){	
	
	$('.mainCircle').toggleClass('callBackground');
	$('.subTwo').toggleClass('downBackground');
	$('.subThree').toggleClass('hangUpBackground');

	$(".subThree").bind('click',function(){
		$(this).toggleClass('subThreeHangUp');
	});
	
	$(".mainCircle").bind('click',function(){
		$(this).toggleClass('mainCircleCall');
		$(this).css('border','2px red solid')
	});
	
});
	
});

body {
  margin: 0;
}

.container {
  position: relative;
}

.subContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: whitesmoke;
}

.mainCircle,
.subOne,
.subTwo,
.subThree,
.subFour {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  box-shadow: 4px 3px 10px black;
	transition: 0.3s ease all;
}

.mainCircle{
	width: 150px;
	height:150px;
	background: #4286f4;
	background-image: url("https://i.ibb.co/M9C94Gf/Aws1Fer.png");
	background-position: -10px -7px; 
	background-size: 100% 100%;
}

.subOne {
  position: absolute;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02-298x300.png");
	background-size: 95% 95%;
	background-position: center center; 
	opacity: 1;
	transition: 0.3s ease all;
}

.subTwo {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
	background-image: url("https://bocarecoverycenter.com/wp-content/uploads/2016/07/Pain_Killer_Addiction_Rehab.png");
	background-size: 100% 100%;
	background-position: center center;
	transition: 0.3s ease all;

}
.subThree {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	background-image: url("https://www.humankind.org/wp-content/uploads/2018/08/ems-icon-doing-cpr-e1534816990562.png");
	display: visible;
	background-size: 100% 100%;
	background-position: center center;
	transition: 0.3s ease all;

}
.subFour {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
	background-image: url("https://image.flaticon.com/icons/svg/9/9895.svg");
	background-size: 100% 100%;
	background-position: center center;
	transition: 0.3s ease all;
}

.mainCircle:active {
  box-shadow: none;
	opacity: 0.8;
  transition: 0.3s ease all;
	transform: scale(0.9);
}

.activeOne{
top:20%;
opacity: 1;
  transition: 0.3s ease all;

}

.activeTwo{
top:65%;	
}

.activeThree{
	left: 20%;
}

.activeFour{
	right:20%;
}

.shadow{
	box-shadow: none;
}

.callBackground{
	background-image: url('https://cdn0.iconfinder.com/data/icons/web-and-marketing-glyph/64/web-and-marketing-glyph-04-512.png');
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center center;
}

.callBackground:hover{
	background-image: url(https://www.falconemergency.com/wp-content/themes/falcon/images/call3.gif);
	background-size: 120% 120%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: white;
	border: 2px greenyellow solid;
}

.mainCircleCall{
	background-image: url(https://www.falconemergency.com/wp-content/themes/falcon/images/call3.gif);
	background-size: 120% 120%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: white;
	border: 2px greenyellow solid;
}

.downBackground{
	background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmhE2xQpAQ5Zui-0KXRIzEiEvlqjt_ZoojTb9P5d7TU80PP4GHqw');
	animation: MoveUpDown 1s linear infinite;
	position: absolute;
	left: 0;
	margin-left: 50%;
	margin-right: 50%;
}

@keyframes MoveUpDown {
  0% {
      transform: translateY(0);
   }
   25% {
      transform: translateY(3px);
   }
   50% {
      transform: translateY(-3px);
   }
   75% {
      transform: translateY(-6px);
   }
	100%{
		transform: translateY(0);
	}
}

.hangUpBackground{
	background-image: url(https://png.pngtree.com/svg/20170310/ab2d1aa29d.svg);
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center center;
}

.hangUpBackground:hover{
	background-image: url(https://i.pinimg.com/originals/dd/eb/db/ddebdb230c1193f2593cae1140b24e49.gif);
	background-size: 160% 160%;
	background-repeat: no-repeat;
	background-position: center center;
}

.subThreeHangUp{
	background-image: url(https://i.pinimg.com/originals/dd/eb/db/ddebdb230c1193f2593cae1140b24e49.gif);
	background-size: 160% 160%;
	background-repeat: no-repeat;
	background-position: center center;
}

.mainCircle:not(.shadow):hover {
  box-shadow: 4px 3px 5px black;
	cursor: pointer; 
	opacity: 0.8;
  transition: 0.3s ease all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
	<div class = "subContainer">
		<div class = "mainCircle"></div>
	</div>
		<div class = "subOne"></div>
		<div class = "subTwo"></div>
		<div class = "subThree"></div>
		<div class = "subFour"></div>
</div>

完整代码如下：https://codepen.io/Refath/pen/drWGZp?editors=0010