请用HTML代码写出默认状态为五个蓝色图标,悬浮状态时最后一个蓝色图标变为白色的“菜单”二字,且有白色下划线。
时间: 2023-12-14 14:36:19 浏览: 25
以下是代码示例:
```html
<style>
/* 设置默认状态下图标为蓝色 */
.icon {
color: blue;
}
/* 设置悬浮状态下最后一个图标为白色 */
.icon:hover:last-of-type::after {
content: "菜单";
color: white;
text-decoration: underline;
}
</style>
<div>
<i class="icon fas fa-home"></i>
<i class="icon fas fa-search"></i>
<i class="icon fas fa-envelope"></i>
<i class="icon fas fa-bell"></i>
<i class="icon fas fa-bars"></i>
</div>
```
解释一下代码:
- 首先通过 CSS 设置默认状态下所有图标的颜色为蓝色。
- 然后在悬浮状态下,通过 `:hover` 伪类选择器和 `last-of-type` 选择器选择最后一个图标,并通过 `::after` 伪元素添加文本内容和下划线。同时将文本颜色设置为白色,实现白色文本效果。
相关问题
请用HTML代码写出默认状态为五个蓝色图标,且左浮动,在同一行,悬浮状态时最后一个蓝色图标变为白色的“菜单”二字,且有白色下划线。
以下是代码实现:
```html
<style>
.icon {
width: 50px;
height: 50px;
background-color: blue;
margin-right: 10px;
float: left;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 20px;
}
.menu:hover:after {
content: "菜单";
color: white;
font-weight: bold;
font-size: 20px;
text-decoration: underline;
}
.menu:hover {
background-color: white;
color: blue;
}
</style>
<div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="menu icon"></div>
</div>
```
解释:
- 通过 `.icon` 类名定义每个图标的样式,包括宽高、背景颜色、右边距、浮动、文本居中等属性。
- 最后一个图标加上 `.menu` 类名,以及 `:hover` 伪类来定义悬浮状态的样式,包括背景颜色、字体颜色等属性。
- 在 `.menu:hover:after` 中,使用 `content` 属性添加文本内容(即“菜单”二字),并设置样式属性,包括字体颜色、字体粗细、字体大小和下划线等。
请用HTML代码写出默认状态为一张图片,悬浮状态变为另一种图片
以下是一个简单的HTML代码,实现默认状态为一张图片,悬浮状态变为另一种图片的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片悬浮状态切换</title>
<style>
img{
width: 300px;
height: 200px;
}
img:hover{
content: url('另一张图片的链接');
}
</style>
</head>
<body>
<img src="默认状态下的图片链接" alt="默认状态下的图片">
</body>
</html>
```
其中,需要替换 `<img>` 标签中的 `src` 属性和 `alt` 属性为默认状态下的图片的链接和图片的描述,同时也需要将 `.hover` 伪类中的 `content` 属性替换为悬浮状态下的图片的链接。