我用 HTML 5 和 CSS 3 制作了一个带有悬停效果的工具提示。我在悬停时使用了带有高度的过渡效果。当我使用 overflow: hidden; 时，工具提示的箭头消失了。可能是什么问题？
我已经尝试过 overflow: visible; 悬停和 tooltiptext::after。但是箭头仍然消失了。
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
height: 0px;
visibility: hidden;
overflow: hidden;
width: 100px;
background-color: #ffff;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
transition: height 2s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
height: 55px;
border: 1px solid black;
}<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Click to go to our main course page</span>
</div>工具提示应使用箭头向下滑动，但使用 overflow: hidden 属性提示消失。
最佳答案
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
height: 0px;
visibility: hidden;
overflow: hidden;
width: 100px;
background-color: #ffff;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
transition: height 2s;
}
.arrow{
position:relative;
}
.arrow::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent black transparent;
opacity:0;
}
.tooltip:hover .tooltiptext {
visibility: visible;
height: 55px;
border: 1px solid black;
}
.tooltip:hover .arrow::after{
opacity:1;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<div class="arrow">
<span class="tooltiptext">Click to go to our main course page</span>
</div>
</div>
</body>
</html>我将内容包装在一个 div 中，然后应用到这个 div 上!
关于html - css3 中的工具提示在悬停时具有过渡效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56541085/