jq移动鼠标悬停图片变亮代码
时间: 2023-07-02 16:18:47 浏览: 56
你可以使用 jQuery 的 hover() 方法和 CSS 的 filter 属性来实现图片悬停变亮的效果,具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片悬停变亮</title>
<style>
.img-container {
display: inline-block;
position: relative;
}
.img-container:hover img {
filter: brightness(120%);
}
.img-container .text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
opacity: 0;
transition: opacity 0.5s;
}
.img-container:hover .text {
opacity: 1;
}
</style>
</head>
<body>
<div class="img-container">
<img src="https://picsum.photos/id/237/300/200" alt="">
<div class="text">这是一张美丽的图片</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$('.img-container').hover(function() {
$(this).find('.text').stop().fadeToggle(500);
});
});
</script>
</body>
</html>
```
代码中,使用了一个 div 来包裹图片和文字,在 hover 事件中,通过使用 jQuery 的 find() 方法来找到文字部分,然后使用 fadeToggle() 方法来实现淡入淡出的效果。同时,使用 CSS 的 filter 属性来实现图片的变亮效果。