鼠标移入事件

最新推荐文章于 2025-04-17 11:35:04 发布

*初级小白*~

最新推荐文章于 2025-04-17 11:35:04 发布

阅读量6k

点赞数

分类专栏： JavaScript案例文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/120244527

版权

JavaScript案例专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现鼠标移入和移出事件，通过设置DOM元素的样式和类名变化，实现元素间的交互效果。详细步骤包括在HTML中创建元素，CSS中设置样式以实现内容垂直居中，然后用JavaScript获取并操作DOM元素，监听鼠标事件，添加或删除类名来改变显示状态。

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

1.先在HTML设置两个box：

 <div id="box1"></div>
 <div id="box2"></div>

2、在CSS中设置样式：
text-align和line-height同时设置可以使文字垂直居中

  #box1,
        #box2{
            width: 200px;
            height: 50px;
            background-color: #999;
            margin: 30px auto;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }

3、设置js：
先获取dom元素：

 //获取dom元素
 var box1=document.getElementById('box1');
 var box2=document.getElementById('box2');

box1与box2的移入事件与移出事件：

//移入事件
        box1.onmouseenter=function(){
            box2.innerHTML='鼠标移入了box1';
        }
        //移出事件
        box1.onmouseleave=function(){
            box2.innerHTML='';
        }
         //移入事件
        box2.onmouseenter=function(){
            box1.innerHTML='鼠标移入了box2';
        }
        box2.onmouseleave=function(){
            box1.innerHTML='';
        }

4、也可以获取类名来设置样式：
在css中设置样式

 /*添加类名*/
        #box1.show{
            background-color: pink;
        }
        #box2.show{
            background-color: skyblue;
        }

5、在js中获取类名有两种方法：
（1）通过className获取与删除

box1.className='show';
box1.className='';
//----------------------------
box2.className='show';
box2.className='';

（2）通过classList获取与删除

 box1.classList.add('show');
 box1.classList.remove('show');
 //-------------------------
 box2.classList.add('show');
 box2.classList.remove('show');

当鼠标移入box2的时候，box1会添加类名show
在这里插入图片描述
当鼠标移入了box1，box2会添加类名show

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1,
        #box2{
            width: 200px;
            height: 50px;
            background-color: #999;
            margin: 30px auto;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        /*添加类名*/
        #box1.show{
            background-color: pink;
        }
        #box2.show{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        //获取dom元素
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        //移入事件
        box1.onmouseenter=function(){
            box2.innerHTML='鼠标移入了box1';
            // box2.classList.add('show');
            box2.className='show';
        }
        //移出事件
        box1.onmouseleave=function(){
            box2.innerHTML='';
            // box2.classList.remove('show');
            box2.className='';
        }

        //移入事件
        box2.onmouseenter=function(){
            box1.innerHTML='鼠标移入了box2';
            // box1.classList.add('show');
            box1.className='show';
        }
        box2.onmouseleave=function(){
            box1.innerHTML='';
            // box1.classList.remove('show');
            box1.className='';
        }
    </script>
</body>
</html>