Dmytrio,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
.indicators button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color: grey;
}
.CLOCK:hover .C1 button {
color: black;
transform: scale(1.1);
transition: 0.5s ease-in;
}
.CLOCK:hover .C2 button {
color: grey;
border-bottom: 0.2rem solid;
}
.WEATHER:hover .W1 button {
color: black;
transform: scale(1.1);
transition: 0.5s ease-in;
}
.WEATHER:hover .W2 button {
color: grey;
border-bottom: 0.2rem solid;
}
.CALENDAR:hover .CA1 button {
color: black;
transform: scale(1.1);
transition: 0.5s ease-in;
}
.CALENDAR:hover .CA2 button {
color: grey;
border-bottom: 0.2rem solid;
}
.CLOCK .C1 button.actives {
color: green;
transform: none;
transition: none;
}
.CLOCK .C2 button.active {
color: green;
border-bottom: 0.2rem solid;
}
.WEATHER .W1 button.actives {
color: blue;
transform: none;
transition: none;
}
.WEATHER .W2 button.active {
color: blue;
border-bottom: 0.2rem solid;
}
.CALENDAR .CA1 button.actives {
color: red;
transform: none;
transition: none;
}
.CALENDAR .CA2 button.active {
color: red;
border-bottom: 0.2rem solid;
}
</style>
</head>
<body>
<div class="indicators" id="navbar">
<div class="CLOCK">
<div class="C1"> <button class="img actives">LOGO1</button> </div>
<div class="C2"> <button class="btn active">CLOCK</button> </div>
</div>
<div class="WEATHER">
<div class="W1"> <button class="img">LOGO2</button> </div>
<div class="W2"> <button class="btn">WEATHER</button> </div>
</div>
<div class="CALENDAR">
<div class="CA1"> <button class="img">LOGO3</button> </div>
<div class="CA2"> <button class="btn">CALENDAR</button> </div>
</div>
</div>
<script>
let btnContainer = document.getElementById("navbar"),
btn = btnContainer.querySelector('.active'),
img = btnContainer.querySelector('.actives');
btnContainer.addEventListener('click', function({
target
}) {
if (target = target.closest('.img, .btn') ) {
target = target.closest('.indicators > div');
img.classList.remove("actives");
img = target.querySelector('.img');
img.classList.add("actives");
btn.classList.remove("active");
btn = target.querySelector('.btn');
btn.classList.add("active");
}
})
</script>
</body>
</html>