淘先锋技术网

首页 1 2 3 4 5 6 7

jquery写出移入移出事件

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/jquery-3.6.0.js"></script>
		<style>
			#box{
				width: 50%;
				height: 300px;
				margin-left: 30%;
				margin-top: 300px;
			}
			#box_one input{
				width: 50%;
				height: 20px;
				border-radius: 20px;
			}
			#box_tow{
				width: 52%;
				height: 100px;
				background-color: bisque;
				border-radius: 20px;
				/* 显示滚动条 */
				overflow-y: scroll;
				display: none;
			}
		</style>
        <title></title>
    </head>
    <body>
       <div id="box">
       	<div id="box_one">
       		<input type="text" placeholder="请输入">
       	</div>
		<div id="box_tow">
			<p>求关注</p>
			<p>求点赞</p>
			<p>求关注</p>
			<p>求点赞</p>
		</div>
       </div>
        
        <script type="text/javascript">
			
            $('#box_one').mousemove(function() {
            	$("#box_tow").show()//当鼠标放到input里时显示#box_tow里的数据
            })
            $('#box_tow').mousemove(function() {
            	$("#box_tow").show()//把鼠标放到box_tow的时候继续显示避免隐藏
            })
            $('#box_tow').mouseout(function() {
            	$("#box_tow").hide()//鼠标离开input后隐藏box_tow
            })
        </script>
    </body>
</html>