我的主要问题是如何让鼠标悬停在图像上时出现 2 个元素。
代码产生: 蓝色 div 覆盖的空间比悬停时两列的一半还要多。我认为这是因为跨度在静态而不是悬停模式下占用空间。此外,尽管容器 div 上有“align-items:center”,但 span 并未在蓝色 div 内水平居中。
.main {
margin: 50px;
width: 100%;
height: 800px;
background-color: red;
}
.wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
gap: 15px;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
gap: 15px;
}
.rollover {
background-color: white;
}
.layer {
background-color: white;
font-family: Georgia;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.rollover:hover .layer {
visibility: visible;
background-color: blue;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.layer span {
display: none;
color: black;
}
.layer:hover span {
display: inline;
font-size: 36px;
font-family: Georgia;
color: white;
z-index: 100;
}
.rollover:hover img {
visibility: hidden;
}
<body>
<div class="main"></div>
<div class="wrapper">
<div class="row">a
<div class="column rollover">
<div class="layer"><img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768"><span>The Alex</span></div>
</div>
<div class="column"><img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768"></div>
</div>
</div>
</body>
我假设您希望这两个元素位于同一位置,因此我们可以使用网格,然后将它们放在同一行/列 1 中。
首先重置一些基础知识。
删除一些 CSS。
html,
body {
margin: 0;
padding: 0;
}
body {
/* viewportunits to cover page fully */
height: 100vh;
width: 100vw;
}
* {
/* include border and padding in element width and height */
box-sizing: border-box;
}
.main {
margin: 50px;
width: 50vw;
height: 50vw;
background-color: red;
}
.wrapper {
margin: 1rem;
border: solid #00FF00 1px;
height: 100%;
}
.row {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
height: 100%;
}
.column {
height: 100%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
}
.column.rollover .layer>* {
grid: 1/1;
}
.row img {
width: 100%;
}
.layer {
font-family: Georgia;
color: white;
font-size: 36px;
color: white;
display: grid;
place-items: center;
height: 100%;
width: 100%;
background-color: blue;
}
.layer span {
display: none;
}
.rollover:hover .layer span {
display: block;
}
.rollover:hover .layer img {
display: none;
}
<body>
<div class="main"></div>
<div class="wrapper">
<div class="row">
<div class="column rollover">
<div class="layer"><img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768"><span>The Alex</span></div>
</div>
<div class="column"><img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768"></div>
</div>
</div>
</body>