使用hover方法实现鼠标经过导航栏项目时背景颜色由蓝色变为红色,字体颜色由白色变以黑色,且字体增加5px,鼠标离开导航栏项目时恢复原来的字体颜色、背景颜色和字体大
时间: 2024-02-22 14:59:08 浏览: 22
下面是实现的示例代码:
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>
登录注册按钮 要求:鼠标经过按钮时,字体颜色变成黑色,移开时,字体颜色变成白色
这个要求可以通过以下的代码来实现:
```html
<!-- HTML -->
<button type="button" id="login-button" class="button">登录</button>
<button type="button" id="register-button" class="button">注册</button>
```
```css
/* CSS */
.button {
color: white; /* 初始字体颜色为白色 */
background-color: gray;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
color: black; /* 鼠标经过时字体颜色变成黑色 */
}
```
这段代码中,我们使用了CSS的:hover伪类来实现鼠标经过按钮时字体颜色的变化。当鼠标经过按钮时,按钮的字体颜色会变成黑色,当鼠标移开时,字体颜色会恢复到白色。
相关推荐
![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)