Заменить изображение CSS

111

26 декабря 2020, 21:40

Есть объект:

<div class="test">
  <img src="img.jpg">
</div>

Как при добавлении класса active к test заменить src у дочки родителя через CSS?

Чтобы на выходе получилось:

<div class="test active">
  <img src="new-img.jpg">
</div>

Это сниппет добавления класса

$(document).on('click', 'button', function() { 
  $('.test').addClass('active'); 
});

.active { 
  background: red; 
} 
 
div { 
  padding: 10px 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="test"> 
  <img src="https://i1.sndcdn.com/artworks-000493050021-abakgn-large.jpg"> 
</div> 
 
<button>Добавить класс active</button>

Answer 1

$(document).on('click', 'button', function() { 
  $('.test').addClass('active'); 
});

.active { 
  background: red; 
} 
 
div { 
  padding: 10px 
} 
 
.active img{ 
  content:url("http://imgur.com/SZ8Cm.jpg"); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="test"> 
  <img src="https://i1.sndcdn.com/artworks-000493050021-abakgn-large.jpg"> 
</div> 
 
<button>Добавить класс active</button>