jquery写出移入移出事件

最新推荐文章于 2024-09-10 13:23:11 发布

小董大咖

最新推荐文章于 2024-09-10 13:23:11 发布

阅读量1.2k

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/ddf__/article/details/128507933

版权

本文探讨了JavaScript中mouseover和mouseout事件在处理父子元素交互时的问题。当鼠标移入子元素时，会意外触发父元素的mouseout事件。示例代码展示了如何使用事件监听来避免这种情况，通过调整事件监听器，确保只在适当的时候显示和隐藏#box_tow元素。

摘要由CSDN通过智能技术生成

mouseover与mouseout可以监听鼠标的移入与移出。mouseover监听移入，mouseout可以监听移出事件
但是mouseover与mouseout如果监听父元素的话，当移入父元素的子元素时，子元素也会监听父元素的移入与移出
当移入子元素时，会调用父元素的移出事件与子元素的移入事件；移出子元素时会调用子元素的移出事件与父元素的移入事件

代码如下

<!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>