html鼠标移动上去后显示图片,鼠标移动到图片名上,显示图片的简单实例
时间: 2023-07-30 07:09:02 浏览: 57
可以使用HTML的`<img>`标签和JavaScript的`onmouseover`和`onmouseout`事件来实现鼠标移动上去后显示图片,鼠标移动到图片名上,显示图片的效果。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>显示图片</title>
<style>
#image {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p onmouseover="showImage()" onmouseout="hideImage()">移动鼠标到这里</p>
<img id="image" src="https://picsum.photos/200">
<script>
function showImage() {
document.getElementById("image").style.display = "block";
}
function hideImage() {
document.getElementById("image").style.display = "none";
}
</script>
</body>
</html>
```
在这个示例中,当鼠标移动到`<p>`标签上时,会触发`showImage()`函数,该函数会将`<img>`标签的`display`属性设为`block`,使图片显示出来。当鼠标移开`<p>`标签时,会触发`hideImage()`函数,该函数会将`<img>`标签的`display`属性设为`none`,使图片隐藏起来。