首页 > web前端 > css教程 > 正文

如何使用 CSS 更改悬停时的图像?

王林
发布: 2023-09-01 10:05:11
转载
1751人浏览过

如何使用 css 更改悬停时的图像?

The "hover" pseudo-class is used to select and apply styles to an HTML element when a user hovers their mouse over it.

Changing an image on hover with CSS is a simple process that can add an extra layer of interactivity to the website. Here, we will learn step-by-step guide to changing an image on hover with CSS −

Prepare the images

使用CSS在悬停时更改图像的第一步是拥有您想要使用的两个图像:默认图像和悬停图像。确保这两个图像都保存在您的网站上,并且您知道每个图像的URL。

将默认图像添加到您的HTML中

使用img标签并指定图像的源(src)。例如 -

立即学习前端免费学习笔记(深入)”;

@@##@@ 
登录后复制

在你的CSS中添加一个悬停规则

In the CSS file, we add a rule to change the image on hover. we will do this by targeting the div tag and specifying a :hover pseudo-class. For example −

img:hover {
   content: url("hover-image.jpg");
} 
登录后复制

Example

Here is an example to change the image on hover using CSS.

<html>
<head>
   <title>Change Image on Hover in CSS</title>
   <style>
      body{ 
         text-align:center;
      }
      div {
         width: 250px;
         height: 195px;
         background:
         url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
         display: inline-block;
      }
      div:hover {
         background:
         url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
      }
   </style>
</head>
<body>
   <h2>Change Image on Hover Using CSS</h2>
   <div class="card"></div>
</body>
</html>
登录后复制

Conclusion

使用CSS在悬停时更改图像是一种简单而有效的方式,可以为网站增加额外的参与度。这是一个很好的方式来为用户创建互动体验,可以帮助他们更长时间地停留在网站上,提高他们的整体满意度。

default

以上就是如何使用 CSS 更改悬停时的图像?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号