html - 样式跨度 :hover to make span element remain visible

Question

我已将 span 元素设置为仅在按钮悬停时可见。如果光标随后移动到 span 元素上，我希望 span 继续可见。 (默认情况下，这已经在 Chrome 中发生。)我认为我可以只使用 span:hover {visibility: visible} 来做到这一点，但它不起作用。我还需要添加其他内容吗？还是有其他问题？

精简 CSS:

.tooltipT {
  position: absolute;
}
.tooltipT span {
  position: absolute;
  width: 0px;
  visibility: hidden;
}
.tooltipT:hover span, .tooltipT span:hover {
  visibility: visible;
  width: 400px;
  }
.tooltipT:hover span, .tooltipT span:hover {
  bottom: 16px;
  left: -200px;
}

简化的 HTML:

<div class="pix">
             <button class="tooltipT" style="top: 50%; left: 50%;">1
                    <span>blah
                    </span>
             </button>
            <img src="img/MIPs.jpg" alt="Melt-in-Place Station details">
</div>

直播here ，涉及到span元素的图片在页面的中间位置，用在了中间的粉色按钮上。

我把它放在 Codepen 上并在那里尝试建议的解决方案。

Answer 1

此处需要 JavaScript，因为当您离开按钮(向现在可见的范围移动)时，按钮不再悬停，因此 CSS 类不再适用。应该这样做:

 button.addEventListener("mouseover", function(){
    span.setAttribute("class", "tooltip");
 });

显然，将按钮替换为按钮的 ID，将工具提示替换为鼠标悬停在按钮上时应应用的类的名称。