jquery移入图片显示框移出恢复
时间: 2023-08-02 13:06:58 浏览: 61
您可以使用jQuery的hover()函数来实现鼠标移入移出事件的处理。例如,以下代码会在鼠标移入图片时显示一个图片显示框,鼠标移出时隐藏它:
HTML代码:
```
<img src="your-image.jpg" class="show-image">
<div class="image-box"></div>
```
CSS代码:
```
.image-box {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
}
```
jQuery代码:
```
$(function() {
$('.show-image').hover(
function() {
$('.image-box').css({
'left': $(this).position().left + $(this).outerWidth() + 'px',
'top': $(this).position().top + 'px'
}).fadeIn();
},
function() {
$('.image-box').fadeOut();
}
);
});
```
解释:
首先,我们使用CSS将图片显示框设置为隐藏状态,并且定位在图片的右侧。然后,我们使用jQuery的hover()函数来为图片添加鼠标移入移出事件处理程序。当鼠标移入图片时,我们使用jQuery的position()和outerWidth()函数来计算图片显示框的位置,并使用fadeIn()函数来显示它。当鼠标移出图片时,我们使用fadeOut()函数将图片显示框隐藏起来。