【问题标题】：Sibling element inheriting opacity?继承不透明度的兄弟元素？
【发布时间】：2018-10-15 09:50:05
【问题描述】：

我现在在一个网站上工作，我必须有一些图像，在悬停时，会变暗并显示一些文本（价格、商品名称等）。所以我有一个用于包装器，然后一个用于图像本身和一个用于覆盖文本。图像 div 和覆盖 div 是包装器的子级。

包装器具有位置：相对，图像和覆盖具有位置：绝对。图像 div 的 z-index 为 10，叠加层的 z-index 为 0。在悬停时，图像变暗到 50% 的不透明度，并且文本出现，就像它应该的那样。除了……文本与图像接触的地方，它也有 50% 的不透明度。图像外的文字具有正常的不透明度。

如何使所有文本的不透明度为 1？

HTML：

  <section class="first-section">
          <div class="outfitcontainer">
            <div class="outfit"> 
              <img src="purelyoutfit1.png" width="100%" height="100%"/>
            </div>
            <div class="overlay">
              <p class="price">$350<s> $4200</s></p>
              <p class="item">FURR COAT</p>
              <p class="designer">Antonio Marras</p>
            </div>
          </div>
        </section>

CSS：

.first-section {
  width: 80%;
  margin-left: 10%;
  background-color: #FFFFFF;
  height: auto;
}

.outfitcontainer {
  position: relative;
  float: left;
  width: 20%;
  height: auto;
  background-color: #FFFFFF;
  margin: 25px;

}
.outfit, .overlay {
  position: absolute;
  width: 200px;
  height: auto;
  top: 0;
  left: 0;
}

.outfit {
  z-index: 10;
  background-color: white;
}
.outfit:hover {
  opacity: .5;
  cursor: pointer;
}
.overlay {
  z-index: 0;
  text-align: center;
  font-weight: bold;
}
.overlay p {
  display: block;
  padding: 30px 0;
  color: black;
}

【问题讨论】：

文字在图片的后面，所以设计成半不透明。如果您希望文本不受阻碍地显示，您可能希望悬停将图像的 z:layer 移动到文本后面。
嗯，好消息是这有所帮助，现在我正在取得进展。坏消息是，这产生了一个新问题：现在，当将鼠标悬停在图像上时，它会正确变暗，并且文本会出现不透明问题。但是，如果将光标移到文本上，图像就会变暗。即使光标移动到文本上，我似乎也找不到一种方法来告诉它将图像不透明度保持在 0.5...

标签： html css

【解决方案1】：

最简单的方法是不要让图像不透明，而是让叠加层为您创建不透明。如果您给叠加层一个不透明的背景（使用 css 或 png 图像），您将能够完全满足您的需求。

一些代码修改应该有助于解决问题。

HTML

<section class="first-section">
    <div class="outfitcontainer">
        <div class="overlay">
            <div class="text">
                <p class="price">$350<s> $4200</s></p>
                <p class="item">FURR COAT</p>
                <p class="designer">Antonio Marras</p>
            </div>
        </div>
        <img src="http://i.imgur.com/hDLwTh8.gif" width="100%" height="100%"/>  
    </div>
</section>

CSS

.first-section {
    width: 80%;
    margin-left: 10%;
    background-color: #FFFFFF;
    height: auto;
}

.outfitcontainer {
    position: relative;
    float: left;
    width: 20%;
    height: auto;
    background-color: #FFFFFF;
    margin: 25px;

}
.outfit, .overlay {
    position: absolute;
    width: 200px;
    height: auto;
    top: 0;
    left: 0;
}

.overlay {
    height: 400px;
    display: none;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-weight: bold;
}
.overlay p {
    display: block;
    padding: 30px 0;
    color: black;
}
img {
    width: 200px;
    position: absolute;
    height: 400px;
}
.outfitcontainer:hover > .overlay {
    display: block;
}

.outfit {
    z-index: 10;
    background-color: white;
}
.outfit:hover {
    cursor: pointer;
}

【讨论】：

【解决方案2】：

试试这个：

.yourClass > *{

  opacity:1;

}.yourClass > *:hover{

  opacity:1;

}

祝你好运！

【讨论】：