HTML纯代码给网页增加右下角提示框弹窗提示图片+文字纯HTML代码无需插件
warning:
这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>右下角弹窗示例</title>
<style>
/* 弹窗背景 */
.floating-box {
position: fixed;
bottom: 0;
right: 0;
z-index: 100;
pointer-events: none;
background: #3498db;
width: 120px;
height: 120px;
padding: 10px;
box-sizing: border-box;
border-radius: 8px;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.floating-box img {
width: 100%;
height: auto;
border-radius: 8px;
}
.floating-box .content {
color: white;
font-size: 14px;
text-align: center;
padding: 10px 0;
}
/* 鼠标悬停时显示弹窗 */
.floating-box:hover {
opacity: 1;
pointer-events: auto;
}
</style>
</head>
<body>
<div class="floating-box">
<img src="your-image.jpg" alt="Image Description">
<div class="content">这里是弹窗文本内容</div>
</div>
</body>
</html>这段代码会在页面的右下角显示一个带有图片和文字的弹窗提示框，并且只使用了HTML和CSS，没有JavaScript。弹窗默认是隐藏的，当鼠标悬停在其上时会显示。这是一个简单的示例，可以根据需要进行样式和内容的调整。
评论已关闭