什么是最简单的方法来执行以下操作？
当用户将鼠标移到红色框上时-出现绿色框
如果用户将光标从红色框移到绿色框，则绿色框不会消失
当用户将光标从绿色框移开（而不是移回红色框）时，绿色框消失。
红色框不会碰到绿色框，就像图片上的一样。
这是我尝试过的方法，但不能解决问题：
$('#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>