首页jq实现鼠标移入移除透明度改变

jq实现鼠标移入移除透明度改变

时间: 2024-03-15 10:46:57 浏览: 27

你可以使用 jQuery 的 `hover` 方法来实现鼠标移入移出元素时的透明度改变效果，示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery鼠标移入移除透明度改变示例</title> <style> div { width: 200px; height: 200px; background-color: #f00; opacity: 0.5; /* 初始透明度为 0.5 */ } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $("div").hover( function() { $(this).css("opacity", 1); }, // 鼠标移入时，将透明度设置为 1 function() { $(this).css("opacity", 0.5); } // 鼠标移出时，将透明度恢复为 0.5 ); }); </script> </head> <body> <div></div> </body> </html> ``` 在这个示例中，我们使用 `hover` 方法来绑定了两个函数，分别是鼠标移入时执行的函数和鼠标移出时执行的函数。在移入时，我们使用 `css` 方法将元素的透明度设置为 1，即完全不透明。在移出时，我们将透明度恢复为 0.5，即半透明状态。