CSS3：在div和文本上具有不透明度的悬停效果

Question

由于该页面未公开，因此我无法共享此页面。但是，我想做的是在div和H4文本元素上都创建一个悬停效果。似乎对我没有任何帮助。这是我的代码：

HTML：

<div class="grid__item small--one-half medium-up--one-quarter">
  <a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
        <div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
        </div>
      </div>
      <noscript>
        <div
          class="collection-image collection-image--square"
          style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
        </div>
      </noscript>
<div class="collection-image--overlay-background"></div>
    <span
  class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
      <span>
        Text Goes Here
      </span>
    </span>
  </a>
</div>

CSS：

.collection-image--overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
     transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
    opacity: 0!important;
    -moz-transition: opacity .25s linear;
    -webkit-transition: opacity .25s linear;
    -o-transition: opacity .25s linear;
    transition: opacity .25s linear;
}
@media only screen and (min-width: 768px) {
  .collection-image--overlay-background:hover {
    z-index: 1;
    opacity: .8;
 }
 .collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
    z-index: 1;
    opacity: 1;
}
}

Answer 1

我尝试制作一个小片段。看看是否是您要找的东西。

由于您在不透明度规则之一中使用！important标志，因此，除非您也使用！important，否则事实之后的所有其他更改将不会生效。但是，我不建议您自由使用！important，因为无论何时出现此类错误都很难跟踪。

.container {
  background-color: blue;
  height: 100px;
}

.onHover {
  background-color: red;
  width: 80%;
  height: 100px;
  margin: 0 auto;
  opacity: 0.5;
  /*opacity: 0.5 !important; In your code you have
  a line like this.*/
}

.onHover:hover {
  opacity: 1;
}

<div class="container">
  <div class="onHover">
    <h4>My title Here</h4>
  </div>
</div>