首页jquery鼠标悬停显示图片

jquery鼠标悬停显示图片

时间: 2023-07-24 17:11:27 浏览: 255

可以通过jquery的hover()方法来实现鼠标悬停显示图片的效果。具体实现步骤如下： 1. 在HTML中添加图片元素和要显示图片的元素。例如： ```html <img src="placeholder.png" alt="图片占位符" class="img-placeholder"> <div class="img-container"> <img src="image.jpg" alt="图片"> </div> ``` 2. 使用CSS隐藏要显示的图片元素。例如： ```css .img-container { display: none; } ``` 3. 使用jQuery的hover()方法监听鼠标移入和移出事件，控制要显示的图片元素的显示和隐藏。例如： ```javascript $(document).ready(function() { $('.img-placeholder').hover(function() { $('.img-container').show(); }, function() { $('.img-container').hide(); }); }); ``` 完整代码如下： ```html <!DOCTYPE html> <html> <head> <title>jQuery鼠标悬停显示图片</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style type="text/css"> .img-container { display: none; } </style> </head> <body> <img src="placeholder.png" alt="图片占位符" class="img-placeholder"> <div class="img-container"> <img src="image.jpg" alt="图片"> </div> <script type="text/javascript"> $(document).ready(function() { $('.img-placeholder').hover(function() { $('.img-container').show(); }, function() { $('.img-container').hide(); }); }); </script> </body> </html> ```

阅读全文