JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<button class="quarter" data-q="1">Q I</button>
<button class="quarter" data-q="2">Q II</button>
<button class="quarter" data-q="3">Q III</button>
<button class="quarter" data-q="4">Q IV</button>

<div id="button-months"></div>

CSS

.active {
  border-color: #fC9;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/976609
 * Как выделять три месяца при наведении на кнопку?
 */
const bm = document.getElementById('button-months');

const selectQ = document.querySelectorAll('.quarter');

// Generate month buttons
const formatter = new Intl.DateTimeFormat('ru-Ru', {
  month: 'long',
  timeZone: 'UTC'
});

const moButtons = [];

for (let i = 1; i <= 12; i++) {
  const month = formatter.format(new Date(2021, i, 1));
  const btn = document.createElement('button');
  btn.textContent = month[0].toUpperCase() + month.substring(1);
  btn.name = 'month';
  btn.className = 'btn';
  btn.value = i;
  bm.appendChild(btn);
  moButtons.push(btn);
}


const btnClass = 'btn-primary';

const overQ = (e) => {
  const Q = +e.target.dataset.q;
  document.querySelectorAll('#button-months button')
    .forEach((el, i) => el.classList[Math.floor(i / 3) === Q - 1 ? 'add' : 'remove'](btnClass));
}

const allOff = () => moButtons.forEach((el) => el.classList.remove(btnClass));

const listen = (eventName, handler) => selectQ.forEach((el) => el.addEventListener(eventName, handler));
listen('mouseover', overQ);
listen('mouseout', allOff);