html - 将现有的悬停 CSS 类用于其他 html 标签

Question

我的一些图片有悬停效果。

目前悬停效果在 figure 标签上处于事件状态。我现在添加了一个 picture 标签。

是否可以从现有 CSS 向 picture 标签添加相同的 CSS，而不必编写整个 CSS，唯一的变化是添加 pciture关闭 图。

  figure{
    margin: 0;
    padding: 0;
    background: #fff;
  }
  figure:hover+span {
    bottom: -36px;
    opacity: 1;
  }
  /* Opacity for banner? */
  .hover5 figure img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: 0.8s ease-in-out;
  }
  .hover5 figure:hover img {
    opacity: .5;
  }

<div class="hover5 column">
   <figure>
      <img src="https://placehold.it/425x218" alt="#" class="img-responsive"></img>
   </figure>
</div>



<div class="hover5 column">
  <picture>
      <source media="(min-width: 650px)" srcset="https://placehold.it/300x244"></source>
      <source media="(min-width: 320px)" srcset="https://placehold.it/300x320"></source>
      <img src="https://placehold.it/300x244" alt="#" style="width:100%;"></img>
  </picture>
</div>

Answer 1

您可以使用更通用的选择器来代替 figure 或 picture:> *。这将以 .hover5 的子元素为目标，无论它是什么元素类型。

.hover5 > *{
    margin: 0;
    padding: 0;
    background: #fff;
  }
  .hover5 > *:hover+span {
    bottom: -36px;
    opacity: 1;
  }
  /* Opacity for banner? */
  .hover5 > * img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: 0.8s ease-in-out;
  }
  .hover5 > *:hover img {
    opacity: .5;
  }

<div class="hover5 column">
   <figure>
      <img src="https://placehold.it/425x218" alt="#" class="img-responsive"></img>
   </figure>
</div>



<div class="hover5 column">
  <picture>
      <source media="(min-width: 650px)" srcset="https://placehold.it/300x244"></source>
      <source media="(min-width: 320px)" srcset="https://placehold.it/300x320"></source>
      <img src="https://placehold.it/300x244" alt="#" style="width:100%;"></img>
  </picture>
</div>