Как добавить класс active в миниатюру статьи?

Question

[Sodasss]

Здравствуйте, подскажите, как сделать что бы одно изображения всегда было видимым, и оставалась видимым, на которое последний раз навели курсором.
На макете всё выглядит так:

Я вывил последние записи так:

<div class="post-container">
			<?php query_posts('showposts=5'); ?>
			<?php while (have_posts()) : the_post(); ?>
			<?php if ( has_post_thumbnail()) { ?>
				<div class="">
								<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
									<h3><?php the_title(); ?></h3>
				<?php the_post_thumbnail(); ?>
			</a>
				</div>
		<?php } ?>
		<?php endwhile; ?>
		</div>

и зада "opacity: 0;", а в hover; opacity: 1;
Но не понимаю, как сделать что бы одна всегда была активной и класс сохранялся у последней наведенной записи

Comments

[ThunderCat]

вроде только через js - повесьте листенеры на ховер для нужных элементов, сначала всем элементам задайте прозрачность, затем на таргете меняйте опасити на 1.

Answer 1

[Евгений]

что-то типа

const banners = document.querySelectorAll('.block');
banners.forEach(banner => {
  banner.addEventListener('mouseenter', (event) => {
    banners.forEach(innerBanner => innerBanner.classList.remove('active'));
    event.target.classList.add('active');
  });
});