如何在鼠标悬停/鼠标移开时切换两个图像？

Question

我有一个黑盒子和一个红色的盒子。当鼠标悬停在黑匣子上时，黑匣子消失，出现红色框，当我鼠标移出新出现的红色框时，红色框消失，黑匣子重新出现。然后在重复的第二个循环中，我卡在红色框上，它不会切换回黑匣子。我该如何解决这个问题？

$(function() {

		$('#black1').on('mouseover', function() {
		 $('#black1').toggle();
		$('#red1').toggle();
		$('#red1').on('mouseout', function() {
		 $('#red1').toggle();
		$('#black1').toggle();
		});
		});
	});

div {width:30px;
    height:30px;
    display:inline-block;
    
}

#black1{
    background-color:black;
}
#red1{
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="red1" style="display:none"></div>
<div id="black1"></div>

Answer 1

尝试单独处理每个mouseover，请参阅：

$(function() {
         // event listeners on mouseover of black1
		$('#black1').on('mouseover', function() {
		 $('#black1').toggle();
		$('#red1').toggle();
    		});
         // event listeners on mouseover of red1
		$('#red1').on('mouseout', function() {
		 $('#red1').toggle();
		$('#black1').toggle();
		});

	});

div {width:30px;
    height:30px;
    display:inline-block;
    
}

#black1{
    background-color:black;
}
#red1{
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="red1" style="display:none"></div>
<div id="black1"></div>

Answer 2

只有鼠标悬停在黑匣子上和红色框后才能管理。但是你没有第一个红色代码和第二个黑色代码。

您将代码从红色传递到黑色，代码为黑色到红色。 如果它足够清楚的话，请点击。

Answer 3

尝试使用show（），hide（）函数。

 $('#black1').on('mouseover', function() {
   $('#black1').hide();
   $('#red1').show();
});
 $('#red1').on('mouseout', function() {
   $('#red1').hide();
   $('#black1').show();
 });