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

时间:2017-10-20 20:09:04

标签: jquery

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

$(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>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

尝试使用show(),hide()函数。

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