html - 将鼠标悬停在图像上似乎无法正常工作

Question

我的一些内容被隐藏了，我希望它在悬停时显示。重点是我需要它只处理图像，而不是整个文本。在我的 html 下方:

.img-info {
  width: 14px;
  height: 14px;
}

#info-1 {
  visibility: hidden;
}

#label-1:hover #info-1 {
  visibility: visible;
}

#info-2 {
  visibility: hidden;
}

#info-container-2:hover #info-2 {
  visibility: visible;
}

#info-3 {
  visibility: hidden;
}

#info-img-3:hover #info-3 {
  visibility: visible;
}

#info-4 {
  visibility: hidden;
}

#info-img-4:hover #info-4 {
  visibility: visible;
}

<form>
  <li>
    <input id="item-1" type="checkbox"></input>
    <label for="item-1" id="label-1">Text 1 
          <span id="info-container-1" class="info-container">
          <img src="info-tag.png" alt="information icon" class="img-info"/></span> 
          <span id="info-1">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-2" type="checkbox"></input>
    <label for="item-2">Text 2
          <span id="info-container-2" class="info-container">
          <img src="info-tag.png" alt="information icon" class="img-info"/></span> 
          <span id="info-2">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-3" type="checkbox"></input>
    <label for="item-3">Text 1 
          <span id="info-container-3" class="info-container">
          <img src="info-tag.png" alt="information icon" class="img-info"/></span> 
          <span id="info-3">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-4" type="checkbox"></input>
    <label for="item-4">Text 1<span id="info-4">Text 1 Explication</span></label>
    <img src="info-tag.png" alt="information icon" class="img-info" />
  </li>
</form>

代码显示了不同的方法 - 第一种有效但它指的是整个标签，其他方法应该在用户将鼠标悬停在图像上时显示隐藏文本但它们不起作用，我想知道为什么。

我尽量保持最小化。如果您能指出正确的方向，我将不胜感激。

Answer 1

只有当您将鼠标悬停在图像上时，才会在此处显示文本。您需要使用 adjacent sibling combinator解决隐藏文本。

.img-info {
  width: 14px;
  height: 14px;
}

#info-1,
#info-2,
#info-3,
#info-4 {
  visibility: hidden;
}

#info-container-1:hover+#info-1,
#info-container-2:hover+#info-2,
#info-container-3:hover+#info-3,
#info-container-4:hover+#info-4 {
  visibility: visible;
}

<form>
  <li>
    <input id="item-1" type="checkbox">
    <label for="item-1" id="label-1">Text 1 
          <span id="info-container-1" class="info-container">
          <img src="https://via.placeholder.com/15x15" alt="information icon" class="img-info"/></span> 
          <span id="info-1">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-2" type="checkbox">
    <label for="item-2">Text 2
          <span id="info-container-2" class="info-container">
          <img src="https://via.placeholder.com/15x15" alt="information icon" class="img-info"/></span> 
          <span id="info-2">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-3" type="checkbox">
    <label for="item-3">Text 1 
          <span id="info-container-3" class="info-container">
          <img src="https://via.placeholder.com/15x15" alt="information icon" class="img-info"/></span> 
          <span id="info-3">Text 1 Explication</span></label>
  </li>
  <li>
    <input id="item-4" type="checkbox">
    <label for="item-4">Text 1 <span id="info-container-4" class="info-container">
          <img src="https://via.placeholder.com/15x15" alt="information icon" class="img-info"/></span> 
          <span id="info-4">Text 1 Explication</span></label>
  </li>
</form>