所以我正在尝试为我的一项任务做一个“类型转换”部分,我希望 Actor 的 Angular 色在 Actor 悬停时出现。我将如何实现这一目标?隐藏deadpool div的显示时,会在页面中留下很大的空隙。我希望在将鼠标悬停在瑞安·雷诺兹 (Ryan Reynolds) 上方之前不显示它。
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
最佳答案
让我提供一个与您当前代码更彻底的背离:
.cast * {
box-sizing: border-box;
}
.cast {
border-radius: 10px;
background: #8b2323;
font-family: Verdana, sans-serif;
text-align: center;
padding: 12px;
}
.cast img {
border-radius: 50%;
max-height: 300px;
}
.cast strong {
background: white;
display: block;
border-radius: 10px;
margin-top: 5px;
}
.cast .actor,
.cast .role {
width: 100%;
}
.cast .actor {
display: block;
z-index: 2;
}
.cast .role {
display: none;
z-index: 1;
}
.cast:hover .actor {
display: none;
}
.cast:hover .role {
display: block;
}
<article class="cast">
<div class="actor">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg">
<strong>Ryan Reynalds</strong>
</div>
<div class="role">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg">
<strong>Wade Wilson</strong>
</div>
</article>
这减少了子元素的数量并且(在我看来)使得选择要显示/隐藏的元素变得更加容易。您的目标是父包装器的 :hover
事件,而不是尝试使用 ID(不能重复使用),您的目标是 .actor
和 . Angular 色
。
一个问题是确保每个图像的尺寸相同,否则在更改时,如果必须调整框的大小,您可能会得到一些不吸引人的过渡。
关于html - 当图像悬停时显示另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47272766/