<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: none;
}
.button:hover .popup {
display: block;
}
</style>
</head>
<body>
<div class="button">
<span>按钮</span>
<div class="popup">
<img src="qq.jpg" alt="图片">
</div>
</div>
</body>
</html>
html鼠标移到按钮上显示图片的方式
于 2023-06-19 14:12:48 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)