Question

我设置的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，并使用工具提示替换当按钮被按下时应该应用的类的名称。

Answer 2

如果你让跨度超出按钮，它确实有效。在这种情况下，您需要element ~ element或element + element选择器来显示悬停按钮时的范围。

＆＃13;

body {
  background: honeydew;  
}

.tooltipT {
  position: absolute;
  background: tomato;
  width: 50px;
  height: 50px;
}

span {
  position: absolute;
  width: 50px;
  height: 50px;
  visibility: hidden;
  background: gold;
  border: 3px solid black;
  top: calc(40% - 40px);
  left: calc(50% + 40px);
}

span:hover, .tooltipT:hover ~ span {
  visibility: visible;
}

button {
  border: 3px solid black;
  top: 40%;
  left: 50%; 
}

button:hover {
  background: red;
}

＆＃13;

<button class="tooltipT">0</button>
<span>_blah</span>

＆＃13;

样式跨度：悬停以使span元素保持可见

2 个答案: