jquery鼠标悬停显示图片
时间: 2023-07-24 21:11:27 浏览: 260
可以通过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>
```
阅读全文
相关推荐


















