Bootstrap鼠标放上去时怎么改变背景颜色?

 我来答
惠企百科
2022-09-28 · 百度认证:北京惠企网络技术有限公司官方账号
惠企百科
惠企百科网是一家科普类综合网站,关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。
向TA提问
展开全部

具体实现方法如下:

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

2、在html文件上找到body标签,在这个标签里创建一个div标签并设置class类为bg 。 如图:

代码:<div class="bg"></div>

3、在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。 如图

代码:

<style type="text/css">

.bg{

width: 150px;

height: 150px;

background-color: red;

}

</style>

4、设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过:hover,然后设置鼠标滑过时的背景颜色。如图

代码:

.bg:hover{

background-color: burlywood;

}

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

6、所有代码,可把所有代码直接复制到新家的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>

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式