我正在尝试构建一个卡片方案，当您将鼠标悬停在电影封面上时，会显示一些信息。问题是:我的明星表情符号不会在悬停时重新出现。
我在中心类中使用了相同的visibility: hidden/visible，但是对于 center-img 它不起作用。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container {
margin: 20px;
width: 300px;
height: 424px;
background-color: black;
position: relative;
}
.fundo {
width: 300px;
height: 424px;
opacity: 1;
}
.center {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 900;
font-family: "montserrat", sans-serif;
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
visibility: hidden;
}
.center-img {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: auto;
visibility: hidden;
}
.fundo:hover {
transition: .4s ease;
opacity: 0.5
}
.fundo:hover + .center {
visibility: visible;
}
.fundo:hover + .center-img {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<img class="fundo" src="https://www.downgraf.com/wp-content/uploads/2015/06/Classic-Movie-Posters-8.jpg" alt="Cinque Terre">
<div class="center">10/10</div>
<img class="center-img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/samsung/161/white-medium-star_2b50.png">
</div>
</body>
</html>
如果你们能帮助我，我希望看到这颗该死的星星在悬停时重新出现。提前致谢。
最佳答案
.container {
margin: 20px;
width: 300px;
height: 424px;
background-color: black;
position: relative;
}
.hover {
visibility: hidden
}
.fundo {
width: 300px;
height: 424px;
opacity: 1;
}
.center {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 900;
font-family: "montserrat", sans-serif;
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.center-img {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: auto;
}
.container:hover .fundo {
transition: .2s ease;
opacity: 0.5
}
.container:hover .hover {
visibility: visible;
}
关于html - 如何让我的图像在用 "visibility: hidden"消失后重新出现在悬停时？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56822496/