css/scss: при наведении на один элемент подсвечивать

Question

есть набор  у которых проставлены атрибуты attr-id

<span attr-id='1'>X</span> <span attr-id='2'>Y</span> <span attr-id='1'>Z</span>

можно ли в css реализовать следующий функционал

при наведении мышки на span выставляются свойства (т.е. свойство :hover) не только этот span, но и все у которых тот же самый attr-id, что и у него

например если навели на X, то background-color: red должен выставиться и для Z потому что у них одинаковые attr-id, т.е. красный фон должен появиться сразу у двух span

Answer 1

Если уникальных значений немного, то относительно новый псевдокласс :has позволяет легко организовать искомое поведение:

:root:has([attr-id='1']:hover) [attr-id='1'], 
:root:has([attr-id='2']:hover) [attr-id='2'], 
:root:has([attr-id='3']:hover) [attr-id='3'] { 
  background-color: red; 
}

<span attr-id='1'>X</span> <span attr-id='2'>Y</span> <span attr-id='3'>Z</span>
<span attr-id='3'>Z</span> <span attr-id='2'>Y</span> <span attr-id='1'>X</span>
<span attr-id='2'>Y</span> <span attr-id='3'>Z</span> <span attr-id='1'>X</span>

Если нужна поддержка старых браузеров, то можете воспользоваться "костылём" из второго варианта ответа.

Если допускаются скрипты...

Т.е. придется отслеживать наведение на один элемент, выставление классов всем нужным элементам, отслеживать отведение от элемента и сброса классов со всем нужных элементов - так?

Можно пойти следующим путём:

const styleHighlight = document.head.appendChild(document.createElement('style')).sheet;
document.addEventListener('mouseover', (ev) => {
  styleHighlight.insertRule(`[attr-id='${ev.target.attributes["attr-id"].value}']{background-color: red}`, 0);
});
document.addEventListener('mouseout', (ev) => {
  styleHighlight.deleteRule(0);
});

<span attr-id='1'>X</span> <span attr-id='2'>Y</span> <span attr-id='3'>Z</span>
<span attr-id='3'>Z</span> <span attr-id='2'>Y</span> <span attr-id='1'>X</span>
<span attr-id='2'>Y</span> <span attr-id='3'>Z</span> <span attr-id='1'>X</span>

БЛОГ НА HUSL

css/scss: при наведении на один элемент подсвечивать

Ответы (1 шт):