Question

这可能很容易，我只是没有得到它。当我将鼠标悬停在整个div上时，我会尝试将其更改为图像不透明度，同时更改其下方字体的颜色（但不会更改字体的不透明度）。

参见我在这里的例子---＆gt; 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>

更改div内图像的不透明度，同时还更改其下方文本的颜色而不更改不透明度

1 个答案: