css - 更改 div 内图像的不透明度，同时在不更改不透明度的情况下更改其下方文本的颜色

Question

这可能非常简单，但我就是不明白。我试图让它在你将鼠标悬停在整个 div 上时改变图像的不透明度，同时改变它下面字体的颜色(但不改变字体的不透明度)。

看我这里的意思的例子---> http://www.golfcarsofdallas.com/cart-finder/new-carts/club-car/commercial/

这是我的代码，但它只会在我将鼠标悬停在文本上时改变颜色，而在我将鼠标悬停在图像上时改变不透明度。不是整个 div。

.showroom-models-big img {
    opacity: 1;
    transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
    }

.showroom-models-big p {
    margin-top: -40px;
    font-weight: 600;
    text-align: center;
    }

.showroom-models-big a {
    color: #000000;
    transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   }

.showroom-models-big img:hover {
    opacity: 0.7;
   }
.showroom-models-big a:hover {
    color: #35c411;
   }

Answer 1

您必须将 :hover 设置为 div，后跟其中的元素，就像这个例子一样。

.container {
  background: #fff;
  display:inline-block;
  text-align: center;
}
.container:hover img {
  opacity: .6;
}
.container:hover p {
  color: blue;
}

<div class="container">
  <img src="http://www.golfcarsofdallas.com/wp-content/uploads/streetlegal.jpg" alt="">
  <p>Some text</p>
</div>