将鼠标悬停在"a"(链接)标签上时显示提示窗口

Question

当将鼠标悬停在"a"链接标签上时，有什么方法可以显示提示窗口吗？我已经在悬停时显示了显示内容，但是悬停时不显示提示。

.prompt {
display:none;
}
.prompt .description-box:hover {
display: contents;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
<li>
<label>
<input type="checkbox" name="checkbox" >Item1
</label>
<a class="description-box"href="#">ℹ️</a>
<p class="prompt" >This is a prompt</p>

</li>    
<li>
<label>
<input type="checkbox" name="checkbox" />Item2
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox" />Item3
</label>
</li>
</ul>

Answer 1

您可以使用内置于 html 标记中的 onmouseover 事件来执行此操作。

添加索引.js文件

function displayPrompt() {
document.querySelector(".prompt").style.display = "contents"
}

<button class="accordion">Categories</button>
<ul class="accordion-content">
<li>
<label>
<input type="checkbox" name="checkbox" >Item1
</label>
<a class="description-box" "href="#" onmouseover="displayPrompt()">ℹ️</a>
<p class="prompt">This is a prompt</p>

</li>    
<li>
<label>
<input type="checkbox" name="checkbox" />Item2
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox" />Item3
</label>
</li>
</ul>
<script src="./index.js"></script>

.prompt {
display: none;
}

这是一种方式

||||||||||||||||||||||||||||||||||||||||||||||||||||||||

您也可以通过修改索引向元素添加一个类来做到这一点.js如下所示：

function displayPrompt() {
document.querySelector(".prompt").classList.add(".show")
}

以及一个"显示"类到您的 css 文件

.prompt {
display: none;
}
.prompt.show {
display: contents
}

我个人更喜欢第二种方式，因为您不会直接从javascript编辑样式。

Answer 2

您可以使用opacity和visibility来创建悬停时的柔和淡入淡出效果。您还可以根据需要自定义.prompt。

.description-box {
position: relative;
display: inline-block;
}
.description-box .prompt {
visibility: hidden;
width: 120px;
color: #000;
text-align: center;
position: absolute;
bottom: -2%;
left: 125%;
opacity: 0;
transition: opacity 0.3s;
}
.description-box:hover .prompt {
visibility: visible;
opacity: 1;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
<li>
<label>
<input type="checkbox" name="checkbox" >Item1
</label>
<a class="description-box" href="#">ℹ️
<span class="prompt">This is a prompt</span>
</a>
</li>
<li>
<label>
<input type="checkbox" name="checkbox" />Item2
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox" />Item3
</label>
</li>
</ul>

Answer 3

非JavaScript 选项1 ：重新排序CSS并将提示放在锚元素中。

.description-box:hover .prompt {
display: contents;
}

和 HTML：

<a class="description-box" href="#">ℹ️<p class="prompt">This is a prompt</p></a>

---

非 JavaScript 选项 2：使用样式创建自己的提示，如我的代码段中的第二个li所示(非常简单)。

---

包含这两个非 JavaScript 选项的代码段：

.prompt {
display: none;
}

/* Swap the classes */
.description-box:hover .prompt {
display: contents;
}

/* Some extra stuff for syling demo */
.promptNEW {
position: absolute;
top: 40vh;
left: 30vw;
background-color: #ddd;
border: 1px solid black;
width: 30vw;
height: 40vh;
content: "prompt content";
display: none;
}
.description-box:hover .promptNEW {
display: block;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
<li>
<label><input type="checkbox" name="checkbox" >Item1</label>
<!-- Put the prompt INSIDE the 'a' element -->
<a class="description-box" href="#">ℹ️ 
<p class="prompt" >This is a prompt</p>
</a>
</li>
<!-- Extra to demonstrate another option -->
<li>
<label><input type="checkbox" name="checkbox" >ItemNEW</label>
<a class="description-box" href="#">ℹ️ 
<p class="promptNEW" >This is a prompt</p>
</a>
</li>
<li>
<label><input type="checkbox" name="checkbox" />Item2</label>
</li>
<li>
<label><input type="checkbox" name="checkbox" />Item3</label>
</li>
</ul>

Answer 4

使用 JavaScript。只需使用onmouseover事件触发函数即可。您可以在下面看到一个示例。希望这能解决您的问题。

function a() {
prompt('What is your name? ')
}

<a onmouseover="a()" href="#">Link</a>

Answer 5

您可以通过创建链接的div 来解决问题。

.description-box a p {display:none;}
.description-box:hover p{
display: block;
}

<button class="accordion">Catagories</button>
<ul class="accordion-content">
<li>
<label>
<input type="checkbox" name="checkbox" >Item1
</label><div class="description-box">
<a  href="">ℹ️
<p>This is a prompt</p></a></div>

</li>    
<li>
<label>
<input type="checkbox" name="checkbox" />Item2
</label>
</li>
<li>
<label>
<input type="checkbox" name="checkbox" />Item3
</label>
</li>
</ul>

从 如何将鼠标悬停在 href 上时显示文本