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>