css设置鼠标滑过背景变色;鼠标滑过背景变色

在很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到 :hover 即可设置成功。
语法:   div:hover{background-color: red;}

操作方法

  • 01

    创建一个新的html文件。如图

  • 02

    在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg 。 如图： 代码：<div class="bg"></div>

  • 03

    在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。 如图 代码： <style type="text/css"> .bg{ width: 150px; height: 150px; background-color: red; } </style>

  • 04

    设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。如图 代码： .bg:hover{ background-color: burlywood; }

  • 05

    实用浏览器打开。保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。、

  • 06

    所有代码，可把所有代码直接复制到新家的html文件上，保存好后用浏览器打开即可看到效果。如图： 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标滑过背景变色</title> <style type="text/css"> .bg{ width: 150px; height: 150px; background-color: red; } .bg:hover{ background-color: burlywood; } </style> </head> <body> <div class="bg"></div> </body> </html>

赞 (0)

相关推荐

  • 怎么设置2345看图王启用鼠标指针翻页?

    启动2345看图王,点击程序界面右上角的[菜单]按钮.(如图所示) 在[菜单]下,点击选择[设置]选项.(如图所示) 在[设置]界面下,点击选择[常规设置]-->勾选[启用鼠标指针翻页]--&g ...

  • 如何在Win10系统电脑中设置“截屏的同时截取鼠标指针”？

    如何在Win10系统电脑中设置“截屏的同时截取鼠标指针”？

    相信很多小伙伴都有在使用windows10系统的电脑,在其中如何才能设置"截屏的同时截取鼠标指针"呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,右键任务栏中的截图工 ...

  • 如何设置放大显示win10系统电脑鼠标移动到达的区域

    如何设置放大显示win10系统电脑鼠标移动到达的区域

    今天,小编给大家介绍设置放大显示win10系统电脑鼠标移动到达的区域的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的电脑中找到[开始]菜单图标,点击进入主界面,然后选择任一字母即可.2 ...

  • css设置背景图片居中；css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • css设置背景颜色的方法和设置背景颜色的透明度

    css设置背景颜色的方法和设置背景颜色的透明度 操作方法 01 新建html文件 02 创建p标签和背景颜色用#色值表示 03 预览效果如图 04 创建p标签和背景颜色用英文设置背景颜色 05 预览效 ...

  • css设置背景不重复

    css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性 background-repeat: no-repeat;进行设置. 操作方法 ...

  • css设置背景图片平铺方式

    css设置背景图片平铺方式 repeat:沿水平竖直两个方向平铺,这也是默认值 no-repeat:不平铺,即只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿竖直方向平铺 操作方 ...

  • css设置背景图片大小

    网页的某些装饰可以通过背景图片来渲染,使得网页更加美观,CSS设置背景图片,不仅仅是大小,还有位置,放大方式,透明化之类.都是必备的CSS技能.层叠样式表(英文全称:Cascading Style S ...

  • win10 设置蓝牙连接罗技 mx master 鼠标

    windows 10 设置蓝牙连接罗技 mx master 鼠标 操作方法 01 电脑 - 打开电脑的蓝牙设置 02 电脑 - 开启搜索设备 03 鼠标 - 切换到 2 -- 蓝牙信道 04 鼠标 - ...

  • css设置body背景图片随内容增加多少显示多少

    操作方法 01 css设置body背景图片随内容增加多少显示多少经验篇 在CSS布局时,可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺(从上到下居中平铺),此时整个网页无论内容是否占满一 ...