图像叠加在鼠标悬停图像之前打开

Question

我想了解为什么当我将鼠标放在页面上的任何位置时，悬停效果适用于图像，而不是在鼠标直接放置在图像本身时激活。我尝试更改主容器的宽度和高度，但这似乎并不能解决它。

<https://codepen.io/jl88s/pen/oawOOM?editors=1100>

Answer 1

我的第一个解决方案导致了另一个问题。当您尝试悬停按钮时，叠加层消失。对此感到抱歉。检查我的新解决方案。

这是 css ：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.image {
width: 400px;
height: 400px;
display: block;
}
.middle {
transition: 2s ease;
position: absolute;
text-align: center;
opacity: 0;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: orange;
color: white;
font-size: 1em;
padding: 16px 32px;
text-transform: uppercase;
}

Answer 2

您遇到此问题是因为您在容器上设置了:hover选择器，该选择器采用完整的高度和宽度。因此，在您进入窗口的那一刻，:hover被触发。

将容器设置为display: inline-flex，删除height，然后将容器放置在相对于其需要的位置 父母。

没有添加父级，也没有在示例中放置容器，请告诉我您是否希望我这样做。

编辑

在此示例中添加了居中。(参见 html 和正文样式(

html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
margin: auto;
}
.image {
width: 400px;
height: 400px;
display: block;
}
.middle {
transition: 2s ease;
position: absolute;
text-align: center;
opacity: 0;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: orange;
color: white;
font-size: 1em;
padding: 16px 32px;
text-transform: uppercase;
}