Question

我正在尝试建立一种卡方案，当您将鼠标悬停在电影封面上时，会显示一些信息。问题是：我的星星表情符号不会在悬停时消失。

我在中心类中使用了相同的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>

如果你们可以帮助我，我希望看到这个肮脏的星星在悬浮时重新出现。预先感谢。

Answer 1

您必须将选择器从.fundo:hover + .center-img切换到.fundo:hover ~ .center-img，因为<img class="center-img">不是<img class="fundo">的直接同级。

通过~选择器，您可以选择具有<img class="fundo">类的.center-img的任何同级。

使用不透明过渡

CodePen using opacity transition

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  opacity: 0; /* Add this */
}

.fundo:hover ~ .center-img { /* Change selector to this */
  transition: 1.2s ease; /* Add this */
  opacity: 1; /* Add this */
}

使用可见性属性

CodePen using visibility property

.center-img {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: auto;
  visibility: hidden;
}

.fundo:hover ~ .center-img { /* Change selector to this */
  visibility: visible;
}

通过使用叠加层解决悬停在星星上或得分时的闪烁效果

CodePen implementation of overlay

该想法是创建一个不可见的覆盖层，该覆盖层将覆盖整个电影图像并将悬停效果应用到覆盖层上。

您的解决方案中出现了闪烁，因为悬停效果被放置在电影图像上，该图像位于星星后面，并且在z轴上得分。

一旦鼠标悬停在星号或乐谱上，可见性效果就会被切换，因为鼠标悬停在星号/分数上而不是电影图像上。这导致悬停效果会消失在星/分数上。移除效果并隐藏其可见性后，您便回到了悬停在影片图像上方的位置。这个周期是造成闪烁效果的原因。

.fundo__overlay { /* Created new selector */
  position: absolute; 
  z-index: 999; /* Give the overlay a higher stacking content */
  top: 0;
  left: 0;
  width: 100%; /* Get it to match the movie image's dimensions */
  height: 100%;
  background: black;
  opacity: 0; /* Used for hover transition */
}

/* Transferred hover effects */
.fundo__overlay:hover { /* Changed selector */
  transition: opacity .4s ease;
  opacity: 0.5
}

.fundo__overlay:hover ~ .center { /* Changed selector */
  visibility: visible;
}

.fundo__overlay:hover ~ .center-img { /* Changed selector */
  visibility: visible;
}

<div class="container">
  <div class="fundo__overlay"></div> <!-- Added new element -->
  <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>

Answer 2

.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;
}

通过“可见性：隐藏”使其消失后，如何使我的图像在悬停时重新出现？

2 个答案: