主页

css hover change background image

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>

悬停前:

 

悬停后:

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论