如何在悬停另一个元素时显示多个元素

Question

我想知道如何设置display：block;当我悬停我的img标签时，在所有p标签和重叠div上。这只能用CSS吗？或者我必须用javascript来解决问题。或者我应该改变我接近这个的方式？感谢所有帮助。

.staff-pic-contain {
  height: 250px;
  width: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.staff-pic {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

p {
  font-weight: bold;
  position: absolute;
  color: white;
  display: none;
}

.name {
  margin-top: 15%;
}

.number {
  margin-top: 25%;
}

.overlay {
  background-color: red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  opacity: 0.75;
  display: none;
}

img:hover {
  cursor: pointer;
}

<div class="staff-pic-contain">
  <img class="staff-pic" src="https://picsum.photos/g/200/300" alt="">
  <p class="position"> CEO </p>
  <p class="name"> NAME </p>
  <p class="number"> 123123 </p>
  <div class="overlay"></div>
</div>

Answer 1

使用CSS在悬停容器时显示p和.overlay：

.staff-pic-contain:hover p, .staff-pic-contain:hover .overlay {
  display: block;
}

要将悬停区域限制为图像，请将border-radius: 50%添加到容器中。

演示：

.staff-pic-contain {
  height: 250px;
  width: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.staff-pic {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

p {
  font-weight: bold;
  position: absolute;
  color: white;
  display: none;
}

.name {
  margin-top: 15%;
}

.number {
  margin-top: 25%;
}

.overlay {
  background-color: red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  opacity: 0.75;
  display: none;
}

img:hover {
  cursor: pointer;
}

.staff-pic-contain:hover p, .staff-pic-contain:hover .overlay {
  display: block;
}

<div class="staff-pic-contain">
  <img class="staff-pic" src="https://picsum.photos/g/200/300" alt="">
  <p class="position"> CEO </p>
  <p class="name"> NAME </p>
  <p class="number"> 123123 </p>
  <div class="overlay"></div>
</div>