js实现一个需求在一个文本后面附件一个问号的图案效果是光标放到问号上会有一个弹框提示一些文本内容光标移出后弹框自动关闭
你可以使用HTML和CSS来创建一个文本后附件一个问号的图案,然后使用JavaScript来实现弹框的效果。以下是一个示例:
HTML代码:
<div class="text-container">
<span class="text">这是一段文本</span>
<span class="question">?</span>
<div class="tooltip">这是提示文本</div>
</div>
CSS代码:
.text-container {
position: relative;
display: inline-block;
}
.question {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip {
position: absolute;
top: 20px;
left: 0;
display: none;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
JavaScript代码:
var question = document.querySelector('.question');
var tooltip = document.querySelector('.tooltip');
question.addEventListener('mouseenter', function() {
tooltip.style.display = 'block';
});
question.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
在上述代码中,我们首先使用HTML创建了一个包含文本、问号和提示框的容器。然后使用CSS设置了容器和元素的样式,使其呈现出我们想要的效果。最后,使用JavaScript添加了鼠标进入和离开事件监听器,当鼠标进入问号时显示提示框,鼠标离开时隐藏提示框。
你可以根据自己的需求修改CSS样式和提示文本内容
原文地址: https://www.cveoy.top/t/topic/iTQp 著作权归作者所有。请勿转载和采集!