使用hover方法实现鼠标经过导航栏项目时背景颜色由蓝色变为红色,字体颜色由白色变以黑色,且字体增加5px,鼠标离开导航栏项目时恢复原来的字体颜色、背景颜色和字体大小。
时间: 2024-02-22 19:59:36 浏览: 70
可以使用CSS的:hover伪类来实现该效果,具体代码如下:
```css
/* 导航栏项目样式 */
.nav-item {
background-color: blue; /* 初始背景颜色为蓝色 */
color: white; /* 初始字体颜色为白色 */
font-size: 16px; /* 初始字体大小为16px */
padding: 10px; /* 设置内边距 */
}
/* 鼠标经过导航栏项目时的样式 */
.nav-item:hover {
background-color: red; /* 背景颜色变为红色 */
color: black; /* 字体颜色变为黑色 */
font-size: 21px; /* 字体大小增加5px */
}
```
需要注意的是,上面的样式代码需要应用到相应的HTML元素中,并且:hover伪类只能应用于可交互的元素上,如链接、按钮等。如果需要应用到非交互元素上,需要通过JavaScript来实现。
相关问题
使用hover方法实现鼠标经过导航栏项目时背景颜色由蓝色变为红色,字体颜色由白色变以黑色,且字体增加5px,鼠标离开导航栏项目时恢复原来的字体颜色、背景颜色和字体大
下面是实现的示例代码:
HTML代码:
```html
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
```
CSS代码:
```css
.nav {
list-style: none;
margin: 0;
padding: 0;
background-color: blue;
font-size: 16px;
}
.nav li {
display: inline-block;
padding: 10px 20px;
color: white;
}
.nav li:hover {
background-color: red;
color: black;
font-size: 21px;
}
```
在上述代码中,我们给导航栏设置了背景颜色和字体大小,然后给每个导航栏项目设置了默认的字体颜色和内边距。接着,通过:hover伪类实现鼠标经过导航栏项目时的样式变化,即背景颜色变为红色,字体颜色变为黑色,字体大小增加5px。
用html5写一个导航栏,背景色为浅蓝色,字体为白色,鼠标悬停时背景色为深蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
nav {
background-color: #87CEFA; /*浅蓝色*/
padding: 10px;
text-align: center;
}
nav a {
color: #fff; /*白色*/
font-size: 18px;
padding: 10px;
text-decoration: none;
}
nav a:hover {
background-color: #1E90FF; /*深蓝色*/
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">产品中心</a>
<a href="#">新闻动态</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)