move in show move out hide
If there is no distance between the hidden content and the toggled label, then just write two hover(), if there is a gap, then you need to use the two time delays setTimeout() and clearTimeout(). method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Move in and move out</title>
<style type="text/css">
/*CSS source code*/
.jsMove_con{ display:none;}/*hidden content*/
.box{ border:1px solid #096; margin:40px auto 0; padding:20px; width:500px;}
.jsMove_con{ width:500px; height:200px; background:#3C9; margin-top:20px;}
</style>
</head>
<body>
<!-- Do not add <body> tags to HTML snippets //-->
<div class="jsMove box">
<input type="button" value="移入/移出1" class="jsMove_t">
<div class="jsMove_con">内容1</div>
</div>
<div class="jsMove box">
<input type="button" value="移入/移出2" class="jsMove_t">
<div class="jsMove_con">内容2</div>
</div>
<!-- Open source CDN is recommended to select external JS to be referenced //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
/*Javascript code snippet*/
$(document).ready(function(){
var move=$(".jsMove_t");
var timer = zero;
move.each(function(){
var move_c2=$(this).next(".jsMove_con");
$(this).mouseover(function(){
move_c2.show();
clearTimeout(timer);
});
$(this).mouseout(function(){
timer=setTimeout(function(){move_c2.hide()},200);
});
move_c2.mouseover(function(){
clearTimeout(timer);
});
move_c2.mouseout(function(){
timer=setTimeout(function(){move_c2.hide()},200);
});
});
});
</script>
</body>
</html>
.