У меня есть эффект наведения на некоторые из моих изображений.

В данный момент эффект наведения активен на тег figure. Я добавил тег picture.

Можно ли добавить тот же CSS к тегу picture из существующего CSS, вместо того, чтобы писать весь CSS с единственным изменением добавления pciture вместо figure.

  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>
1
Mv27 20 Авг 2018 в 16:27

4 ответа

Лучший ответ

Вместо использования 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>
2
Turnip 20 Авг 2018 в 13:36

Там, где это возможно, старайтесь не ориентироваться на элементы HTML. Создайте набор имен классов, которые вы можете поместить любой элемент.

.your-hover-style:hover {

}

Или, если вам нужно настроить таргетинг на элемент HTML, вы можете разделить их запятыми.

figure, picture {

}
2
martinedwards 20 Авг 2018 в 13:38
figure{
    margin: 0;
    padding: 0;
    background: #fff;
  }
  
  /* Opacity for banner? */
 img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: 0.8s ease-in-out;
  }
 img:hover {
    opacity: .5;
  }
  
  
<figure>
  <img src="https://placehold.it/425x218" alt="#" class="img-responsive"/>
</figure>



<picture>
    <source media="(min-width: 650px)" srcset="https://placehold.it/1200x400"/>
    <source media="(min-width: 320px)" srcset="https://placehold.it/380x500"/>
    <img src="https://placehold.it/1200x400" alt="#" style="width:100%;"/>
</picture>
1
Gabor 20 Авг 2018 в 13:36

Лучший вариант - создать собственный класс CSS для этого эффекта.

Давайте назовем этот класс «эффект». Вы можете заменить все figure ссылки в вашем CSS на .effect. И в вашем HTML превратите <figure> в <figure class="effect"> и <picture> в <picture class="effect">

0
Rutger van Dijk 20 Авг 2018 в 13:34
51931789