<分区>
标签 javascript html css
<分区>
我想知道如何设置 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>最佳答案
在悬停容器时使用 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>关于javascript - 悬停另一个元素时如何显示多个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49954469/