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

<!DOCTYPEhtml><html><head><title></title><linkhref="http://libs.baidu.com/bootstrap/3... <!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">博文</a></li>
<li><a href="">留言</a></li>
</ul>
</body>
</html>
比如鼠标放上去时背景颜色我想变成绿色的
展开
 我来答
爱娱乐达人小张
高粉答主

2020-05-05 · 关注我不会让你失望
知道答主
回答量:395
采纳率:100%
帮助的人:8.3万
展开全部

具体实现方法如下:

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>

百度网友ebd7441cd
2015-11-23 · 超过110用户采纳过TA的回答
知道小有建树答主
回答量:153
采纳率:0%
帮助的人:177万
展开全部
.navbar-nav li:hover{
display: block;
background: green;
padding: 10px;

}

在调用的CSS中增加

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

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式