HTML中图片实现鼠标在上面变为另外一具或图片加亮
要实现鼠标悬停在图片上时变为另一张图片或图片加亮，你可以使用CSS的:hover伪类选择器。以下有两种实现方法： 方法一：更换图片你可以通过CSS更改background-image属性，但请注意，这种方法通常用于背景图片，而不是<img>标签中的图片。如果你想要更换<img>标签中的图片，你可能需要使用JavaScript或jQuery。但是，为了简单起见，这里我展示如何使用CSS更改背景图片： - <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>鼠标悬停更换图片示例</title>
- <style>
- .right {
- width: 50%; /* 假设的容器宽度 */
- height: 200px; /* 假设的图片高度 */
- background-image: url('image1.jpg'); /* 默认图片 */
- background-size: cover; /* 图片覆盖整个容器 */
- background-position: center; /* 图片居中 */
- transition: background-image 0.3s ease; /* 平滑过渡效果 */
- }
-
- .right:hover {
- background-image: url('image2.jpg'); /* 悬停时显示的图片 */
- }
- </style>
- </head>
- <body>
- <div class="container">
- <!-- ...左侧内容... -->
- <div class="right">
- <!-- 这里不需要<img>标签，因为使用背景图片 -->
- </div>
- </div>
- </body>
- </html>
如果你想要在原图片上添加亮度效果，你可以使用CSS的filter属性，特别是brightness()函数。 - <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>鼠标悬停图片加亮示例</title>
- <style>
- .right img {
- transition: filter 0.3s ease; /* 平滑过渡效果 */
- }
-
- .right img:hover {
- filter: brightness(1.5); /* 悬停时增加亮度到150% */
- }
- </style>
- </head>
- <body>
- <div class="container">
- <!-- ...左侧内容... -->
- <div class="right">
- <img src="your-image-url.jpg" alt="描述性文字">
- </div>
- </div>
- </body>
- </html>
在这个例子中，.right img:hover选择器将应用一个亮度为150%的滤镜到悬停在上面的图片上。transition属性则确保了这个效果能够平滑地过渡。 在CSS中，如果你想要使用filter属性来使图片变暗，你可以使用brightness()函数并设置一个小于1的值。brightness()函数的值表示亮度系数，其中1表示原始亮度，大于1的值会增加亮度，小于1的值则会减少亮度（即变暗）。 例如，要使图片变暗到原始亮度的50%，你可以将亮度系数设置为0.5。以下是如何使用CSS来实现这一效果的示例： - <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>鼠标悬停使图片变暗示例</title>
- <style>
- .img-hover {
- transition: filter 0.3s ease; /* 平滑过渡效果 */
- }
-
- .img-hover:hover {
- filter: brightness(0.5); /* 悬停时使图片变暗到50%的亮度 */
- }
- </style>
- </head>
- <body>
- <img class="img-hover" src="your-image-url.jpg" alt="描述性文字">
- </body>
- </html>
在这个例子中，当鼠标悬停在带有.img-hover类的<img>元素上时，图片的亮度会减少到原始亮度的50%，从而实现了变暗的效果。transition属性确保了这个变化是平滑的。
| 
|免责声明|小黑屋|依星资源网
( 鲁ICP备2021043233号-3 )|网站地图
发表于 2024-7-19 17:02:50
扫码关注微信公众号，及时获取最新资源信息！【