如何让我的图像在“可见性：隐藏”消失后重新出现在悬停时？答案

【问题标题】：How to make my image reappear on hover after making it disappear with "visibility: hidden"?如何让我的图像在“可见性：隐藏”消失后重新出现在悬停时？
【发布时间】：2019-11-11 07:58:57
【问题描述】：

我正在尝试构建一个卡片方案，当您将鼠标悬停在电影封面上时，会显示一些信息。问题是：我的明星表情符号不会在悬停时重新出现。

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

如果你们可以帮助我，我希望看到这个糟糕的星星在悬停时重新出现。提前致谢。

【问题讨论】：

Hy Leo..您的代码需要一些增强...使用 +（相邻兄弟选择器）您可以使用 ~（通用兄弟组合器）..因为它选择了所有作为 fundo 兄弟的元素元素：...
谢谢，朋友。现在我吸取了教训。再也不会使用这个“+”选择器了哈哈
太棒了.......狮子座

标签： html css image hover

【解决方案1】：

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

~ 选择器将使您能够选择具有 .center-img 类的 <img class="fundo"> 的任何同级。

使用不透明度过渡

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>

【讨论】：

不知道“+”和“~”选择器之间的区别。非常感谢，解释的很清楚。现在有了新代码，每次我将鼠标悬停在星星或分数上时都会出现故障。会是什么呢？关于如何解决这个问题的任何想法？
一种可能的解决方案是创建一个<div>，其中宽度和高度为电影海报图像的 100%，其z-index 位于其他元素之上。然后您需要将:hover 效果转移到新创建的<div> 叠加层上。我会将调整后的 CSS 发布在我的主帖上。
或者把pointer-events: none放在.center和center-img的div上。这样他们就不会干扰.fundo 上的悬停状态。
我什至不知道这存在。这使它变得简单得多。谢谢！
现在一切都非常好！！非常感谢你们，向你们学习了很多东西。

【解决方案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;
}

【讨论】：