在图像上盘旋似乎不能正常工作

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

在这里，只有当您悬停图像时，文本才会出现。您需要使用邻接同胞组合器来处理隐藏的文本。

​

.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中添加(+)，即邻接同胞选择器，因为您没有添加(+)，浏览器认为它是悬停元素的子元素，并在悬停元素中搜索#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>

​