js鼠标悬停显示图片

<div id="hoverArea">
    鼠标悬停在这里查看图片
</div>
<img id="hoverImage" src="path_to_image.jpg" style="display:none;">

#hoverArea {
    width: 200px;
    height: 50px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
}

#hoverImage {
    width: 200px;
    height: auto;
}

document.getElementById('hoverArea').addEventListener('mouseover', function() {
    document.getElementById('hoverImage').style.display = 'block';
});

document.getElementById('hoverArea').addEventListener('mouseout', function() {
    document.getElementById('hoverImage').style.display = 'none';
});