js鼠标移入移出实例

最新推荐文章于 2025-06-16 23:59:03 发布

℡梦醒时分

最新推荐文章于 2025-06-16 23:59:03 发布

阅读量868

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js javascript 前端

本文链接：https://blog.youkuaiyun.com/spc007spc/article/details/103808549

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现鼠标移入和移出的交互效果。通过示例代码，阐述了在鼠标移入事件中获取当前元素及目标元素，并进行相应操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果
在这里插入图片描述
代码

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #div1 {
                width: 200px;
                height: 100px;
                background-color: #ccc;
                border: 1px solid #999;
            }
			#div12 {
                display: none;
            }
			#div13 {
                display: none;
            }
        </style>
        <script>
            window.onload = function() {
            	//获取当前操作元素
                var input1 = document.getElementById('input1');
                //获取被操作元素
                var div11 = document.getElementById('div11');
                //移入时间
                input1.onmouseover = function() {
                	//被操作的元素的display为显示
                    div11.style.display = 'block';
                }
                input1.onmouseout = function() {
                    div11.style.display = 'none';
                }
				
				var input2 = document.getElementById('input2');
                var div12 = document.getElementById('div12');
                input2.onmouseover = function() {
                    div12.style.display = 'block';
                }
                input2.onmouseout = function() {
                    div12.style.display = 'none';
                }
				
				var input3 = document.getElementById('input3');
                var div13 = document.getElementById('div13');
                input3.onmouseover = function() {
                    div13.style.display = 'block';
                }
                input3.onmouseout = function() {
                    div13.style.display = 'none';
                }
            }
			
        </script>
    </head>

    <body>
        <input id="input1" type="checkbox" value="checkbox" />
		<input id="input2" type="checkbox" value="checkbox" />
		<input id="input3" type="checkbox" value="checkbox" />
        <div id="div1">
            <span id="div11">1</span>
			<span id="div12">2</span>
			<span id="div13">3</span>
        </div>
    </body>

</html>