Блог

У меня есть неупорядоченный список с тегами anchor ( <a> ), и мне нужно применить некоторый стиль, основанный на том, на какой ссылке наведена мышь.

Есть ли у меня способ получить доступ к классам зависшего элемента?

Вы можете создать Item компонент, который внутри управляет состоянием, чтобы видеть, зависает ли отображаемый элемент или нет с onMouseEnter onMouseLeave помощью функций and . Но поскольку вы пытаетесь изменить стиль элементов для такого базового действия, как наведение курсора, вам следует придерживаться только CSS, ориентируясь на HTML-элемент с :hover помощью selector .

В первом подходе каждый Item компонент будет иметь это состояние, поэтому тогда style={} вы можете сделать style={isHovered ? {background: "red"} : null} предположение, что у вас есть isHovered состояние.

Я бы порекомендовал вам styled-components, они великолепны.

В ReactJS события имеют название like onMouseOver , вы можете увидеть другие события здесь.

Для вашего случая вы можете написать, как показано ниже:

 <a onMouseOver={() => { console.log('hovered') }}> ~~~
  

Если вы хотите применить стиль к элементу при наведении курсора, используйте селектор :hover CSS…

 #mydiv:hover {
  background-color:red;
}  

 <div id="mydiv">Text to hover on!</div>  

Если вы можете изменить CSS только для получения желаемых изменений стиля, это идеально по сравнению с использованием кода для изменения стилей. У 100% CSS-решения есть и другие преимущества….

• Вы можете попросить людей, которые знают только CSS, поддерживать и обновлять код.
• Вы можете отключить стили, не отключая код.
• Вы можете обновлять стили, не нарушая код.
• Средство проверки CSS обнаружит проблемы в .css файле, которые были бы пропущены, если бы они были закодированы в raw JS.

Источник: Документация MDN — :hover