Javascript 如何在mouseleave上显示/隐藏方框？
做以下事情最简单的方法是什么Javascript 如何在mouseleave上显示/隐藏方框？,javascript,jquery,css,Javascript,Jquery,Css,做以下事情最简单的方法是什么 当用户将鼠标移到红色框上时，绿色框出现 如果用户将光标从红色移动到绿色框，绿色框不会消失 当用户将光标移离绿色框（而不是移回红色框）时，绿色框消失 红色的盒子没有碰到绿色的盒子，就像图片上的一样 以下是我尝试过的，但这并不能解决问题： $('#red').mouseenter(function() { $('#green').show(); }); $('#green').mouseleave(function() { $('#green').hi
$('#red').mouseenter(function()
{
$('#green').show();
});
$('#green').mouseleave(function()
{
$('#green').hide();
});
这里的问题是，一旦您将光标从红色框移到绿色框，绿色框就会消失。我想您正在尝试这样做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.red {
width: 200px;
height: 200px;
background-color: red;
}
.green {
display: none;
width: 200px;
height: 200px;
background-color: green;
}
.divider {
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="divider"></div>
<div class="green"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".red").mouseenter(function(){
$(".green").show();
});
$(".green").mouseleave(function(){
$(".green").hide();
});
});
</script>
</body>
</html>
瑞德先生{
宽度：200px；
高度：200px；
背景色：红色；
}
格林先生{
显示：无；
宽度：200px；
高度：200px；
背景颜色：绿色；
}
.分隔器{
高度：200px；
}
$（文档）.ready（函数（）{
$（“.red”）.mouseenter（函数（）{
$（“.green”）.show（）；
});
$（“.green”）.mouseleave（函数（）{
$（“.green”）.hide（）；
});
});