设为首页收藏本站
开启辅助访问 切换到窄版

依星源码资源网,依星资源网

 找回密码
 立即注册

QQ登录

只需一步，快速开始

【好消息，好消息，好消息】VIP会员可以发表文章赚积分啦 ！
搜索
游戏源码
游戏源码
网站系统
网站系统
Electron
Electron
影音资源
影音资源
依星源码资源网,依星资源网»首页 › 编程教程 › 其它教程 › HTML中图片实现鼠标在上面变为另外一具或图片加亮 ...
返回列表 发新帖
查看: 77|回复: 0

HTML中图片实现鼠标在上面变为另外一具或图片加亮

[复制链接] 主动推送
源码资源网

1万

主题

1万

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
12008
发表于 2024-7-19 17:02:50 | 显示全部楼层 |阅读模式
HTML中图片实现鼠标在上面变为另外一具或图片加亮
要实现鼠标悬停在图片上时变为另一张图片或图片加亮，你可以使用CSS的:hover伪类选择器。以下有两种实现方法：
方法一：更换图片
你可以通过CSS更改background-image属性，但请注意，这种方法通常用于背景图片，而不是<img>标签中的图片。如果你想要更换<img>标签中的图片，你可能需要使用JavaScript或jQuery。但是，为了简单起见，这里我展示如何使用CSS更改背景图片：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>鼠标悬停更换图片示例</title>
  7. <style>
  8.   .right {
  9.     width: 50%; /* 假设的容器宽度 */
  10.     height: 200px; /* 假设的图片高度 */
  11.     background-image: url('image1.jpg'); /* 默认图片 */
  12.     background-size: cover; /* 图片覆盖整个容器 */
  13.     background-position: center; /* 图片居中 */
  14.     transition: background-image 0.3s ease; /* 平滑过渡效果 */
  15.   }
  16.   
  17.   .right:hover {
  18.     background-image: url('image2.jpg'); /* 悬停时显示的图片 */
  19.   }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="container">
  24.   <!-- ...左侧内容... -->
  25.   <div class="right">
  26.     <!-- 这里不需要<img>标签，因为使用背景图片 -->
  27.   </div>
  28. </div>
  29. </body>
  30. </html>
复制代码
方法二：图片加亮（使用滤镜）
如果你想要在原图片上添加亮度效果，你可以使用CSS的filter属性，特别是brightness()函数。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>鼠标悬停图片加亮示例</title>
  7. <style>
  8.   .right img {
  9.     transition: filter 0.3s ease; /* 平滑过渡效果 */
  10.   }
  11.   
  12.   .right img:hover {
  13.     filter: brightness(1.5); /* 悬停时增加亮度到150% */
  14.   }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="container">
  19.   <!-- ...左侧内容... -->
  20.   <div class="right">
  21.     <img src="your-image-url.jpg" alt="描述性文字">
  22.   </div>
  23. </div>
  24. </body>
  25. </html>
复制代码
在这个例子中，.right img:hover选择器将应用一个亮度为150%的滤镜到悬停在上面的图片上。transition属性则确保了这个效果能够平滑地过渡。


在CSS中，如果你想要使用filter属性来使图片变暗，你可以使用brightness()函数并设置一个小于1的值。brightness()函数的值表示亮度系数，其中1表示原始亮度，大于1的值会增加亮度，小于1的值则会减少亮度（即变暗）。
例如，要使图片变暗到原始亮度的50%，你可以将亮度系数设置为0.5。以下是如何使用CSS来实现这一效果的示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>鼠标悬停使图片变暗示例</title>
  7. <style>
  8.   .img-hover {
  9.     transition: filter 0.3s ease; /* 平滑过渡效果 */
  10.   }
  11.   
  12.   .img-hover:hover {
  13.     filter: brightness(0.5); /* 悬停时使图片变暗到50%的亮度 */
  14.   }
  15. </style>
  16. </head>
  17. <body>

  19. <img class="img-hover" src="your-image-url.jpg" alt="描述性文字">

  21. </body>
  22. </html>
复制代码
在这个例子中，当鼠标悬停在带有.img-hover类的<img>元素上时，图片的亮度会减少到原始亮度的50%，从而实现了变暗的效果。transition属性确保了这个变化是平滑的。

图片, 亮度, 使用, CSS, 实现

相关帖子

扫码关注微信公众号，及时获取最新资源信息！【下载附件优惠：VIP会员5折；永久VIP免费】
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

免责声明：
1、本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
2、本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，请勿任何商业目的与商业用途。
3、若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4、论坛的所有内容都不保证其准确性，完整性，有效性，由于源码具有复制性，一经售出，概不退换。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
5、用户使用本网站必须遵守适用的法律法规,对于用户违法使用本站非法运营而引起的一切责任，由用户自行承担
6、本站所有资源来自互联网转载，版权归原著所有，用户访问和使用本站的条件是必须接受本站“免责声明”，如果不遵守，请勿访问或使用本网站
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的，一切后果自己负责，本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
9、本站以《2013 中华人民共和国计算机软件保护条例》第二章 “软件著作权” 第十七条为原则：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。若有学员需要商用本站资源，请务必联系版权方购买正版授权！
10、本网站如无意中侵犯了某个企业或个人的知识产权，请来信【站长信箱312337667@qq.com】告之，本站将立即删除。
郑重声明：
本站所有资源仅供用户本地电脑学习源代码的内含设计思想和原理，禁止任何其他用途！
本站所有资源、教程来自互联网转载，仅供学习交流，不得商业运营资源，不确保资源完整性，图片和资源仅供参考，不提供任何技术服务。
本站资源仅供本地编辑研究学习参考，禁止未经资源商正版授权参与任何商业行为，违法行为！如需商业请购买各资源商正版授权
本站仅收集资源，提供用户自学研究使用，本站不存在私自接受协助用户架设游戏或资源，非法运营资源行为。
 
在线客服
点击这里给我发消息 点击这里给我发消息 点击这里给我发消息
售前咨询热线
312337667

微信扫一扫，私享最新原创实用干货

QQ|免责声明|小黑屋|依星资源网 ( 鲁ICP备2021043233号-3 )|网站地图

GMT+8, 2024-11-23 23:56

Powered by Net188.com X3.4

邮箱：312337667@qq.com 客服QQ：312337667（工作时间：9：00~21：00）

快速回复 返回顶部 返回列表