<!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 首次发布
这段代码展示了如何使用HTML和CSS创建一个简单的按钮，当鼠标悬停时，会弹出一个居中显示的框，框内包含一张图片。样式包括按钮的内联块级展示、背景色、鼠标指针效果，以及弹出框的绝对定位、变换和阴影效果。
2925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
