首页怎么实现鼠标经过图片之后更换图片

怎么实现鼠标经过图片之后更换图片

时间: 2024-10-10 11:13:35 浏览: 31

要实现鼠标经过图片后更换图片的效果，通常使用HTML和CSS结合JavaScript或者jQuery来实现。以下是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .normal-image { width: 100px; /* 图片宽度 */ height: 100px; /* 图片高度 */ } .hover-image { display: none; /* 初始隐藏 */ } </style> </head> <body> <img src="image1.jpg" class="normal-image hover-image" id="hover-img"> <script> // 使用JavaScript document.getElementById("hover-img").onmouseover = function() { this.src = "image2.jpg"; // 更换为新的图片路径 }; document.getElementById("hover-img").onmouseout = function() { if (this.src === "image2.jpg") { // 恢复原图，如果已经是新图 this.src = "image1.jpg"; } }; </script>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#hover-img").mouseenter(function(){ $(this).attr('src', 'image2.jpg'); // 更换图片 }); $("#hover-img").mouseleave(function(){ if ($(this).attr('src') == 'image2.jpg') { // 如果是新图则恢复原图 $(this).attr('src', 'image1.jpg'); } }); }); </script> </body> </html> ``` 这里假设你有两个图片文件，`image1.jpg`是默认显示的，`image2.jpg`是鼠标悬停时显示的。你需要将这两个路径替换为你实际的图片路径。

阅读全文