在悬停时淡入背景元素时淡出一个元素答案

【问题标题】：Fade one element out while fade in background element on hover在悬停时淡入背景元素时淡出一个元素
【发布时间】：2021-10-13 23:56:50
【问题描述】：

我想在悬停时淡出放置在图像上的文本并从背景淡入另一个。到目前为止，淡出部分正在工作，但部分淡出没有。请参阅“运行代码 sn-p”。我想完全淡出第一个文本但不完全覆盖背景图像，这就是不透明度的原因：

 location-wrapper { background-color: rgba(0, 0, 0, 0.6);}

设置为 0.6 并且：

.location-wrapper:hover {
    background-color: rgb(255, 255, 255);
    opacity: 0.7;
}

设置为 0.7。如果我将背景文本的不透明度设置为 1，我可以看到背景文本在那里，但是悬停时将其混合的过渡不起作用。我猜是因为 div 在后台并且触发了第一个 div 的悬停而不是背景的悬停选项？

.location-container {
  position: relative;
  height: 200px;
  width: 100%;
  color: white;
}

.location-bg-image {
  position: absolute !important;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -1;
}

.location-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: 2s;
}

.location-wrapper:hover {
    background-color: rgb(255, 255, 255);
    opacity: 0.7;
}

.location-overlay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.location-city {
  padding-bottom: 60px;
  color: white;
  font-size: 25px;
  font-weight: 400;
}

.location-text-wrapper {
  height: 100%;
  padding-top: 40px;
  width: 100%;
  opacity: 1;
  transition: 5s;

  display: flex;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.location-text-wrapper:hover {
    opacity: 1;
  }
  
.location-text {
  color: white;
  font-size: 18px;
  opacity: 0;
  transition: 5s
}

.location-text:hover {
  opacity: 1;
}

<div class="location-container">
  <Image class="location-bg-image" src="https://via.placeholder.com/150/000000/FFFFFF/"/>
  <div class="location-wrapper has-bg-image">
     <div class="location-overlay">
       <div class="location-city">ExampleCity</div>
     </div>
  </div>
  <div class="location-text-wrapper">
    <div class="location-text">ExampleBackgroundText</div>
 </div>
</div>

【问题讨论】：

标签： css node.js reactjs

【解决方案1】：

您不需要单独的.location-text-wrapper。我在下面的 sn-p 中稍微更改了您的 HTML。我在.location-overlay 中插入了.location-text，在.location-wrapper:hover 上我正在更新.location-city 和.location-text 的不透明度值。这将为您提供您想要的行为。

.location-container {
  position: relative;
  height: 200px;
  width: 100%;
  color: white;
}

.location-bg-image {
  position: absolute !important;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -1;
}

.location-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: 2s;
}

.location-wrapper:hover {
    background-color: rgb(255, 255, 255);
    opacity: 0.7;
}

.location-overlay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1
}


.location-city {
  padding-bottom: 60px;
  color: white;
  font-size: 25px;
  font-weight: 400;
  opacity: 1;
  transition: 5s;
}

.location-wrapper:hover .location-city {
  opacity: 0;
}

.location-wrapper:hover .location-text {
  opacity: 1;
}
  
.location-text {
  color: black;
  font-size: 18px;
  opacity: 1;
  transition: 5s
}

<div class="location-container">
  <Image class="location-bg-image" src="https://via.placeholder.com/150/000000/FFFFFF/"/>
  <div class="location-wrapper has-bg-image">
     <div class="location-overlay">
       <div class="location-city">ExampleCity</div>
        <div class="location-text">ExampleBackgroundText</div>
     </div>
  </div>
</div>

【讨论】：