我的div有一个基础类.media，我想给所有.book提供一些样式，一些样式（背景图像）只对其他不同的类有效：

div.media {
  color: black;
  width: 100px;
  height: 50px;
  background-size: 100%;
}

div.media.book {
  background-image: url("https://picsum.photos/10");
}

div.media.movie {
  background-image: url("https://picsum.photos/10");
}

div.media.movie-old {
  background-image: url("https://picsum.photos/10");
}

div.mediatext {
  position: relative;
  color: black;
  top: 2px;
}

div.media:hover {
  filter: invert(1);
}

<div class="media book">
  <div class="mediatext">
    clockwork orange
  </div>
</div>
<div class="media movie-old">
  <div class="mediatext">
    blade runner
  </div>
</div>

但是悬停不起作用。我想象能够定义一个父类，有多个子类，其中有不同的bg-images，并且有一个:hover { filter: invert(1); }的额外元素，它影响所有具有类media的元素（因此文本和图像被反转）。