数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 CSS 更改鼠标悬停时的图像？
要使用 CSS 更改鼠标悬停时的图像，我们将使用 :hover 伪类。在本文中，我们讨论了两种不同的方法来使用 CSS 属性更改鼠标悬停时的图像。
我们的 HTML 文档中有一张图像，我们的任务是在将鼠标悬停在图像上时更改图像。
更改鼠标悬停时图像的方法
以下是本文将讨论的使用 CSS 更改鼠标悬停时图像的方法列表，其中包含分步说明和完整的示例代码。
使用 background 属性更改鼠标悬停时的图像
为了使用 CSS 更改鼠标悬停时的图像，我们使用了 background 属性和 :hover 伪类。
- 我们使用了 **container** 类来将图像的 div 内容放置在中心，使用 flex 和 justify-content 属性。
- 然后，在第二步中，我们使用 **card** 类使用 **background** 属性插入图像，并使用 CSS height 和 width 属性设置其尺寸。
- 最后一步，我们使用了 **".card:hover"**，它在鼠标悬停在第二步中插入的图像上时更改图像。
示例
这是一个完整的示例代码，实现了上述步骤，使用 **background** 属性使用 CSS 更改鼠标悬停时的图像。
<html>
<head>
<title>
To change image on hover with CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
}
.card {
width: 350px;
height: 195px;
background:url("/plsql/images/plsql-mini-logo.jpg")
no-repeat;
display: inline-block;
}
.card:hover {
background:
url("/html/images/test.png") no-repeat;
}
</style>
</head>
<body>
<h3>
Changing Image On Hover With CSS
</h3>
<p>
In this example we have used CSS <strong>
:hover</strong> psuedo-class with
<strong>background</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
使用 content 属性更改鼠标悬停时的图像
在这种使用 CSS 更改鼠标悬停时图像的方法中，我们使用了 CSS content 属性和 :hover 伪类，该伪类在鼠标悬停在图像上时将其作为目标。
- 我们使用了 **container** 类来将图像的 div 内容放置在中心，使用 flex 和 justify-content 属性。
- 然后，在第二步中，我们使用 **card** 类使用 **content** 属性插入图像。
- 最后一步，我们使用了 **".card:hover"**，它使用 CSS **content** 属性更改鼠标悬停在图像上时的图像。
示例
这是一个完整的示例代码，实现了上述步骤，使用 **content** 属性使用 CSS 更改鼠标悬停时的图像。
<html>
<head>
<title>
To change image on hover with CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
}
.card {
content:url("/plsql/images/plsql-mini-logo.jpg");
}
.card:hover{
content:
url("/html/images/test.png");
}
</style>
</head>
<body>
<h3>
Changing Image On Hover With CSS
</h3>
<p>
In this example we have used CSS <strong>
:hover</strong> psuedo-class with
<strong>content</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 更改鼠标悬停时的图像。我们讨论了两种不同的方法来使用 CSS 更改鼠标悬停时的图像：使用 **background** 属性以及 **:hover** 伪类，以及使用 **content** 属性。我们可以使用以上两种方法中的任何一种。
更新于：2024年8月28日
2万+ 次浏览
广告