Question

我是CSS的新手，当您将鼠标悬停在页面上的特定位置时，我试图在下面显示带有一些文本的图像。问题是由于某种原因图像无法显示，这是我的代码：

.foto-jb {
 visibility: hidden;
}

.jb :hover .foto-jb {
 visibility: visible;
 opacity: 1;
}

<div class="member1">
 <i class="name-person"></i>
 <span class="jb">Name Person</span>
</div>

<div class="foto-jb">
 <img src="./images/photo.png">
</div>

Answer 1

空格是后代选择器，.jb :hover .foto-jb选择具有.foto-jb类的元素，它们是.jb类的后代。这种情况在您的情况下不存在。

将<div class="foto-jb">移到<div class="member1">内，然后使用同级（+）和后代选择器（空格）的组合来选择图像，或者仅使用+选择<div class="foto-jb">。 / p>

HTML：

<div class="member1">
  <i class="name-person"></i>
  <span class="jb">Name Person</span>
  <div class="foto-jb">
    <img src="./images/photo.png">
  </div>
</div>

CSS：

.jb:hover + .foto-jb {
  visibility: visible;
}

.jb:hover + .foto-jb选择紧随.jb类的元素之后的元素（+是相邻的同级选择器）。

Answer 2

这行代码：

.jb :hover .foto-jb {
      visibility: visible;
      opacity: 1;
    }

意味着，一旦.jb类被悬停，请查找.foto-jb类内的.jb类并将其设为可见。

实际上，您要做的是以下操作：

.member1:hover+.foto-jb
{
  visibility: visible;
  opacity: 1;
}

这意味着，一旦.member类被悬停，请查找.foto-jb类之后紧接着放置的.member类，并使其可见。

您可能想看看CSS Selectors，它真的很有帮助。

Answer 3

需要同时修复HTML和CSS

.foto-jb {
  visibility: hidden;
}

.jb:hover + .foto-jb {
  visibility: visible;
}

<div class="member1">
  <i class="name-person"></i>
  <span class="jb">Name Person</span>
  <div class="foto-jb">
    <img src="https://dummyimage.com/300x150/000/fff">
  </div>
</div>

在html页面上加载工具提示时出现问题

3 个答案: