2023-11-22 09:45PM
参考:https://www.studytonight.com/css-howtos/how-to-change-image-on-hover-with-css
可以这样编写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<style>
.change {
height: 200px;
width: 300px;
background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1626415729-101156.png") ;
background-repeat: no-repeat;
}
.change:hover {
background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1626415784-101156.png") ;
background-repeat: no-repeat;
}
</style>
<body>
/* 如果想要文字显示,并且不会图片 hover 的影响,可以这样编写 */
<h2> Change image on hover</h2>
<div class="change"></div>
</body>
</html>
悬停前:
悬停后:
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论