JSFiddle - React, Tailwind, and code Playground

by lloydbanks

HTML

<div class="slider">
	<div class="slider__content">
		<div class="slider__item slider__item--active" id="slide-0">
			<h2 class="slider__header">Поселения</h2>
		</div>
		<div class="slider__item" id="slide-1">
			<h2 class="slider__header">Сооружения</h2>
		</div>
		<div class="slider__item" id="slide-2">
			<h2 class="slider__header">Природа</h2>
		</div>
	</div>
	<div class="slider__previews">
		<a href="#" class="js-toggle">Поселения</a>
		<a href="#" class="js-toggle">Сооружения</a>
		<a href="#" class="js-toggle">Природа</a>
	</div>
</div>

CSS

.slider__content {
	position: relative;
	height: 100px;
}

.slider__item {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity .2s;
}

.slider__item--active {
	opacity: 1;
}

JavaScript

const ACTIVE_CLASS = 'slider__item--active'
document.querySelectorAll('.js-toggle').forEach((item, index) => {
    item.addEventListener('mouseover', () => {
        document.querySelector(`.${ACTIVE_CLASS}`).classList.remove(ACTIVE_CLASS)

        document.getElementById(`slide-${index}`).classList.add(ACTIVE_CLASS)
    })
})