Question

jquery鼠标移入移出显示隐藏问题

两个div，A和B，AB为并列关系，非嵌套关系。
假设鼠标滑到A元素（id ="a"）上， B元素(id="b") 显示
鼠标从A移动到B上，B元素也一直显示（不会出现先消失再显示的情况）
鼠标离开A、B元素区域，B元素就隐藏

这样的效果应该如何实现，求大神讲解下。

Answer 1

这种效果需要B区域至少有一部分地方跟A区域是重复的，才实现得了。

①：B在A里面：

html

<div style="width:200px; height:200px; border:1px solid red;" id="a">
	<div style="width:100px; height:100px; border:1px solid skyblue; margin:50px auto; display:none;" id="b"></div>
</div>

jq

$(document).ready(function(){
	
		$("#a").hover(function(){
			$("#b").show();
		},function(){
			$("#b").hide();
		});
		
	});

②：B只有一部分在A区域里。如：

html

<div style="width:200px; height:200px; border:1px solid red;" id="c"></div>
<div style="width:100px; height:100px; border:1px solid skyblue; display:none; margin-top:-10px;" id="d"></div>

jq

$(document).ready(function(){
		$("#c").hover(function(){
			$("#d").show();
		},function(){
			$("#d").hide();
		});
		
		$("#d").hover(function(){
			$("#d").show();
		},function(){
			$("#d").hide();
		});
		
		
	});

追问

谢谢大神，我复制了你给的第二种方法试了，的确可以实现效果，但不知道放在我的代码里能不能实现效果，因为我的显示是通过添加带有animation的class名让元素慢慢展开。