Javascript 当悬停另一个元素时，如何显示多个元素

我试图弄清楚如何设置display:block；在所有的p标签和叠加div上，当我悬停在我的img标签上时。这是否只有在CSS中才能实现，或者我必须用javascript来解决。或者我应该改变我处理这件事的方式吗？谢谢你的帮助

.staff pic包含{
高度：250px；
宽度：250px；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.职员照片{
身高：100%；
宽度：100%；
边界半径：50%；
}
p{
字体大小：粗体；
位置：绝对位置；
颜色：白色；
显示：无；
}
.姓名{
利润率最高：15%；
}
.号码{
利润率最高：25%；
}
.覆盖{
背景色：红色；
身高：100%；
宽度：100%；
边界半径：50%；
位置：绝对位置；
排名：0；
不透明度：0.75；
显示：无；
}
img：悬停{
光标：指针；
}

首席执行官

名称

123123

悬停容器时，使用CSS显示

p

和

.overlay

：

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

要将悬停区域限制为图像，请将

边框半径：50%

添加到容器中

演示：

.staff pic包含{
高度：250px；
宽度：250px；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
}
.职员照片{
身高：100%；
宽度：100%；
边界半径：50%；
}
p{
字体大小：粗体；
位置：绝对位置；
颜色：白色；
显示：无；
}
.姓名{
利润率最高：15%；
}
.号码{
利润率最高：25%；
}
.覆盖{
背景色：红色；
身高：100%；
宽度：100%；
边界半径：50%；
位置：绝对位置；
排名：0；
不透明度：0.75；
显示：无；
}
img：悬停{
光标：指针；
}
.staff pic contain:hover p、.staff pic contain:hover.overlay{
显示：块；
}

首席执行官

名称

123123

悬停容器时，使用CSS显示

p

和

.overlay

：

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

要将悬停区域限制为图像，请将

边框半径：50%

添加到容器中

演示：

.staff pic包含{
高度：250px；
宽度：250px；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
}
.职员照片{
身高：100%；
宽度：100%；
边界半径：50%；
}
p{
字体大小：粗体；
位置：绝对位置；
颜色：白色；
显示：无；
}
.姓名{
利润率最高：15%；
}
.号码{
利润率最高：25%；
}
.覆盖{
背景色：红色；
身高：100%；
宽度：100%；
边界半径：50%；
位置：绝对位置；
排名：0；
不透明度：0.75；
显示：无；
}
img：悬停{
光标：指针；
}
.staff pic contain:hover p、.staff pic contain:hover.overlay{
显示：块；
}

首席执行官

名称

123123

应该可以使用：悬停伪类，联机阅读，javascript也很好，浏览器安全选项应该可以使用：悬停伪类，联机阅读，javascript也很好，浏览器安全选项，

~

在这种情况下不起作用。我想知道为什么要花时间回答这些琐碎的问题，而OP显然懒得用谷歌搜索它，而且花了半个小时。@user9294038 add:.员工图片包含{border radius:50%}@user9294038这个信息需要在你的问题中明确，我们不是读心术的人…@user9294038-这在你的问题上并不明显。VXp的想法是前进的方向-请参阅更新的答案。是的，

~

在这种情况下不会很好地工作。我想知道为什么要花时间回答这些琐碎的问题，而OP显然懒得用谷歌搜索它，并且花了半个小时。@user9294038 add:.员工图片包含{边界半径：50%}@user9294038这个信息需要在你的问题中明确，我们不是读心术的人…@user9294038-这在你的问题中并不明显。VXp的想法是前进的方向-见更新的答案。