请用HTML代码写出默认状态为一张图片,悬浮状态变为另一种图片
时间: 2023-08-24 22:05:05 浏览: 43
以下是一个简单的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` 属性替换为悬浮状态下的图片的链接。
相关问题
请用HTML代码写出默认状态为一张扑克牌k,悬浮状态变为13张扑克牌k绕轴心旋转,
以下是代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>旋转扑克牌</title>
<style>
.card {
width: 100px;
height: 150px;
background-image: url("https://www.wpclipart.com/recreation/games/cards/playing_card_back.png");
background-size: cover;
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
```
默认状态下,页面展示一张扑克牌的背面。当鼠标悬浮在扑克牌上时,通过 CSS 中的 `:hover` 伪类,将扑克牌绕 Y 轴旋转 360 度,从而展示出扑克牌的正面,实现悬浮状态下扑克牌的旋转效果。
请用HTML代码写出默认状态为五个蓝色图标,悬浮状态时最后一个蓝色图标变为白色的“菜单”二字,且有白色下划线。
以下是代码示例:
```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` 伪元素添加文本内容和下划线。同时将文本颜色设置为白色,实现白色文本效果。