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

我的一些内容是隐藏的，我想它显示在悬停。重点是我需要它只处理图像，而不是整个文本。 下面是我的html：

.img信息{
宽度：14px；
高度：14px；
}
#信息-1{
可见性：隐藏；
}
#标签-1：悬停#信息-1{
能见度：可见；
}
#信息-2{
可见性：隐藏；
}
#info-container-2：悬停#info-2{
能见度：可见；
}
#信息-3{
可见性：隐藏；
}
#info-img-3：悬停#info-3{
能见度：可见；
}
#信息-4{
可见性：隐藏；
}
#info-img-4：悬停#info-4{
能见度：可见；
}

文本1
正文1说明


文本2
正文1说明


文本1
正文1说明


正文1正文1说明

此处，文本仅在您将图像悬停时显示。 您需要使用来解决隐藏的文本

.img信息{
宽度：14px；
高度：14px；
}
#信息-1，
#信息-2，
#信息-3，
#信息-4{
可见性：隐藏；
}
#info-container-1：悬停+#info-1，
#info-container-2：悬停+#info-2，
#info-container-3：悬停+#info-3，
#info-container-4：悬停+#info-4{
能见度：可见；
}

文本1
正文1说明


文本2
正文1说明


文本1
正文1说明


文本1
正文1说明

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

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

虽然您必须找到其他方法，可能是使用JS，但代码应该可以工作

提示：使用css属性visibility:hidden，元素渲染并占用其空间，并且是隐藏的，在您的示例中，它扩展了父元素*标签*的宽度

---

尝试使用CSS属性*显示*代替

这是您的工作代码，您需要在CSS中添加（+），也就是说，当您没有添加（+）时，浏览器将其视为悬停元素的子，并在悬停元素中搜索<代码>这也是第一次

成功的原因

另外，第一个是处理标签而不是图像，因为您已将css属性添加到

#label-1

.img信息{
宽度：14px；
高度：14px；
}
#信息-1，
#信息-2，
#信息-3，
#信息-4{
可见性：隐藏；
}
#info-container-1：悬停+#info-1，
#info-container-2：悬停+#info-2，
#info-container-3：悬停+#info-3，
#info-container-4：悬停+#info-4{
能见度：可见；
}

文本1
正文1说明


文本2
正文1说明


文本1
正文1说明


文本1
正文1说明

如果第一种方法有效，就没有这样的事情。。。有什么问题吗？谢谢。没错。我的错。不幸的是，这并不能解决悬停问题。@Paulie_D是的，但情况是，我只需要在图像上悬停时显示文本。第一次尝试使用标签文本和图像所占据的区域。我需要其他方法来工作（只需悬停一张图片）。谢谢。一切似乎都正常工作。但是你能解释一下“+”符号的用法吗？为什么有必要？@Gerard在信息范围中添加一个类似乎比获取他们所有的

ID

s要好。@M.Nowakowski这就是为什么我在回答中包含了这个链接。简而言之：您的CSS指的是找不到的子元素。我的CSS指的是兄弟姐妹。@您可能是对的，尽管我们无法确定是否有一些Javascript指的是代码段中未包含的ID。我总是有点犹豫是否要完全重写代码。但是这些

ID

s仍然可以存在，因此如果有一些逻辑使用它们，我们不会影响JS，并且为所有跨度添加一个类将使读/写更容易，例如，该类将是“info text”：

.img info+.info text{…}

感谢您的提示。代码在没有js的情况下工作。我在其他答案中使用了兄弟组合器。我想知道如何使用显示器而不是可见性。多多少少知道其中的区别。不妨试一试，看看什么更适合我的需要。再次感谢。感谢您的详细解释。：）我想我知道。因此，没有兄弟组合符的选择器将第二个元素视为子元素，而不是并行元素。