jQuery库是一个流行的JavaScript库，它使得开发者能够更容易地操作网页上的元素，在网页中，我们经常需要实现一些交互效果，如鼠标悬停时图片变亮，这可以通过CSS和jQuery的结合来实现。
我们需要在HTML文档中引入jQuery库，可以通过以下代码添加一个指向jQuery CDN的引用：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
接下来，我们将创建一个简单的HTML结构，包括一张图片和一个div容器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标移入图片变亮</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="示例图片" id="brighten-image">
</div>
<script>
// jQuery代码将在这里添加
</script>
</body>
</html>
现在，我们需要添加一些CSS来定义图片的默认状态和鼠标悬停时的状态，我们将添加一个类image-container来包裹图片，并为其设置一些基本样式：
<style>
.image-container {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
#brighten-image {
width: 100%;
height: auto;
transition: filter 0.3s ease-in-out;
}
#brighten-image:hover {
filter: brightness(1.2);
}
</style>
接下来，我们将使用jQuery来实现鼠标悬停时图片变亮的效果，我们将监听mouseenter和mouseleave事件，并相应地调整图片的亮度：
<script>
$(document).ready(function() {
$('#brighten-image').mouseenter(function() {
$(this).css('filter', 'brightness(1.2)');
});
$('#brighten-image').mouseleave(function() {
$(this).css('filter', 'brightness(1)');
});
});
</script>
这段代码首先等待文档加载完成，然后为#brighten-image元素添加mouseenter和mouseleave事件监听器，当鼠标移入图片时，图片的亮度会增加20%，而当鼠标移出图片时，图片的亮度会恢复到原始状态。
为了提高性能，我们可以使用CSS的transition属性来平滑地过渡亮度变化，而不是使用jQuery的css方法：
<script>
$(document).ready(function() {
$('#brighten-image').mouseenter(function() {
$(this).addClass('brighten');
});
$('#brighten-image').mouseleave(function() {
$(this).removeClass('brighten');
});
});
</script>
我们需要在CSS中添加相应的类：
<style>
/* 其他CSS代码 */
#brighten-image.brighten {
filter: brightness(1.2);
transition: filter 0.3s ease-in-out;
}
</style>
现在，当鼠标悬停在图片上时，图片会变亮，而当鼠标移出图片时，图片会恢复到原始亮度，这种方法利用了jQuery的事件处理能力和CSS的过渡效果，实现了一个简单而优雅的交互效果。
还没有评论，来说两句吧...