页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色

原创已于 2022-11-02 19:33:44 修改 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

于 2022-11-02 19:33:31 首次发布

本文介绍了一个简单的网页交互效果实现方法：通过鼠标悬停在不同的颜色块上，使整个页面背景色发生变化。使用HTML与JavaScript完成布局及交互逻辑。

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

<style>
        .tab-body-div{
            float: left;
            margin: 10px;   
        }
        
    </style>
</head>
<body>
    <!--1、页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色  -->
    <div class="tab-body-div" style="width: 200px;height: 100px;background-color: blue"></div>
    <div class="tab-body-div" style="width: 200px;height: 100px;background-color: red"></div>
    <div class="tab-body-div"style="width: 200px;height: 100px;background-color: green"></div>
    <div class="tab-body-div"style="width: 200px;height: 100px;background-color: yellow"></div>
  
    <script>
        var tabs = document.getElementsByClassName('tab-body-div')
        console.log(tabs)
            
             for(let i =0;i<tabs.length;i++){ 
                tabs[i].onmouseover = function(){
                if(tabs[i]==this){ 
                   let body_color = document.querySelector('body')
                   body_color.style.backgroundColor = this.style.backgroundColor
                }
               
                tabs[i].onmouseout = function(){
                    let body_color2 = document.querySelector('body')
                    body_color2.style.backgroundColor ='white'
                }
             }
          }
      
        
    </script>
</body>