jquery 图片hover

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片 hover 是一种常见的网页交互效果，当用户将鼠标悬停在图片上时，图片会发生某种变化，如改变透明度、大小或显示额外的信息。

类型

改变透明度：当鼠标悬停在图片上时，图片的透明度会发生变化。
改变大小：鼠标悬停时，图片会放大或缩小。
显示额外信息：鼠标悬停时，图片旁边会显示额外的文字或图标。

应用场景

产品展示：在电商网站上，用户可以通过悬停查看产品的详细信息。
图片轮播：在图片轮播组件中，用户可以通过悬停切换图片。
导航菜单：在导航菜单中，用户可以通过悬停展开子菜单。

示例代码

以下是一个简单的 jQuery 图片 hover 示例，展示了如何实现鼠标悬停时改变图片透明度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片 Hover</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hover-image {
            width: 200px;
            height: 200px;
            transition: opacity 0.5s;
        }
    </style>
</head>
<body>
    <img src="path/to/image.jpg" class="hover-image" alt="Hover Image">

    <script>
        $(document).ready(function() {
            $('.hover-image').hover(
                function() {
                    $(this).css('opacity', '0.5');
                },
                function() {
                    $(this).css('opacity', '1');
                }
            );
        });
    </script>
</body>
</html>