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>