鼠标进入色块，页面背景改变颜色

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

<style>div {color: #ccc;font-size: 20px;font-weight: 700px;text-align: center;line-height: 100px;}.div_1 {width: 100px;height: 100px;background-color: rgb(0, 255, 213);}.div_2 {width: 100px;height: 100px;background-color: rgb(243, 239, 16);}.div_3 {width: 100px;height: 100px;background-color: rgb(255, 0, 128);}.div_4 {width: 100px;height: 100px;background-color: rgb(11, 219, 80);}
</style><body id="all"><div id="div1" style="width: 100px;height:100px;background-color:rgb(0, 255, 213);">一年</div><div id="div2" style="width: 100px;height:100px;background-color:rgb(243, 239, 16);">四季</div><div id="div3" style="width: 100px;height:100px;background-color:rgb(255, 0, 128);">两人</div><div id="div4" style="width: 100px;height:100px;background-color:rgb(11, 219, 80);">三餐</div><script>var div1 = document.getElementById('div1');var div2 = document.getElementById('div2');var div3 = document.getElementById('div3');var div4 = document.getElementById('div4');div1.addEventListener('mousemove', function () {document.getElementById('all').setAttribute('class', 'div_1');})div2.addEventListener('mousemove', function () {document.getElementById('all').setAttribute('class', 'div_2');})div3.addEventListener('mousemove', function () {document.getElementById('all').setAttribute('class', 'div_3');})div4.addEventListener('mousemove', function () {document.getElementById('all').setAttribute('class', 'div_4');})</script>
</body>

鼠标进入色块，页面背景改变颜色相关推荐

JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
1.JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色. <style>.colorChange {width: 100px;height: 100px;di ...
页面中鼠标触碰字体后切换颜色且随鼠标移走后改变
such as: 鼠标移上去: 颜色会随着鼠标移动变回原来的颜色实现这个效果其实很简单: less代码: li {display: inline-block;width: 50/100rem;hei ...
点击按钮随机更换页面背景颜色
点击按钮随机更换页面背景颜色先准备一个按钮就像如图所示的那样然后获取到刚刚的按钮并为按钮绑定点击事件. 并且弹出警告框来证明获取并绑定成功按钮. 效果展示: 点击按钮即可弹出警告框. 在点击事件 ...
php如何设鼠标经过颜色,jQuery实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: jQuery实现感应鼠标经过Div层变换图层背景颜色) .divbox{ height:300 ...
JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色
JS实现奇偶行变色,鼠标滑上改变颜色,离开恢复颜色 css 奇偶行变色是通过 li:nth(odd) 和 li:nth(even) 实现的,鼠标滑上改变颜色,离开恢复颜色是通过 :hover 实现的 ...
html背景自动换,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法，本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片希望本文所述对大家的javascrip ...
HTML背景颜色长宽高怎么设置,Dreamweaver 8怎么通过代码设置页面高宽颜色
Dreamweaver 8怎么通过代码设置页面高宽颜色 dreamweaver 8怎么通过代码设置页面高宽颜色?正常我们使用dw设计网页都是用前台来设计网页的高宽,颜色等,该怎么直接使用代码完成这些设 ...
Windows 11 / 10 怎样设置火狐浏览器的页面背景为护眼颜色
怎样设置火狐的页面背景为护眼颜色 1. 安装,和配置stylish插件. firfox浏览器地址栏输入about:addons --> 在出现的网页的搜索栏中输入Stylus搜索 --> ...

鼠标进入色块，页面背景改变颜色

鼠标进入色块，页面背景改变颜色相关推荐

最新文章

热门文章