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

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>

Answer 2

调试提示，在标签上添加一些背景颜色将显示标签标签所占据的区域，在您的情况下，这是标签标签内的内容所占据的区域。

#info-1 {
  visibility: hidden;
  background-color: red;
}

尽管您必须找到其他方法（也许使用JS），但是代码应该可以工作。

提示：css属性可见性：隐藏，该元素呈现并占用其空间并被隐藏，在您的情况下，这会扩展父元素* label *的宽度。

尝试使用CSS属性* display *代替

Answer 3

这是您的工作代码，您需要在css中添加（+），即adjacent sibling selectors，因为您尚未添加（+），浏览器将其视为hover元素的子元素，并且在悬停元素中搜索#info-n，这也是第一个<li>能够解决问题的原因。

第一个也是正在处理标签，而不是在其图像上，因为您已将css属性添加到#label-1。

.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"></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-container-4" class="info-container">
    <img src="info-tag.png" alt="information icon" class="img-info" /></span><span id="info-4">Text 1 Explication</span></label>
  </li>
</form>