我有一个黑盒子和一个红色的盒子。当鼠标悬停在黑匣子上时,黑匣子消失,出现红色框,当我鼠标移出新出现的红色框时,红色框消失,黑匣子重新出现。然后在重复的第二个循环中,我卡在红色框上,它不会切换回黑匣子。我该如何解决这个问题?
$(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>
答案 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();
});