Add Underline When Hover in React and CSS

Question

How do I add a underline in text-decoration when hovering the text? Seems this is correct but it still doesn't work

       <span
        style={{
          color: "red",
          cursor: "pointer",
          "& :hover": {
            textDecoration: "underline"
          }
        }}
      >
        Click this.
      </span>

`& :hover` would apply to a hovered _descendant_ of the current element. You want `&:hover` — CBroe, Apr 20 '22 at 09:54
You are using less syntax, sure that's implemented in your project? — 0stone0, Apr 20 '22 at 09:55
@CBroe. Tried `&:hover` but same thing. underline doesnt appear — Joseph, Apr 20 '22 at 09:57
Then you probably don't have less pre compiler. Use a regular className with some css. — 0stone0, Apr 20 '22 at 09:58
Does this answer your question? [How can I access a hover state in reactjs?](https://stackoverflow.com/questions/32125708/how-can-i-access-a-hover-state-in-reactjs) — 0stone0, Apr 20 '22 at 09:58

score 2 · Accepted Answer · answered Apr 20 '22 at 10:06

The style property doesn't support selectors.

You need to move your logic into a <style> element or a <link>ed stylesheet.

There are plenty of React-friendly libraries for generating them on-the-fly for you. Styled Components is a popular tool for this which supports the SCSS syntax you are (almost — you have a rogue space after the &) using.

import { styled } from 'styled-components';

const MySpan = styled.span`
    color: red;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
`;

and then

<MySpan>Click this.</MySpan>

However, span elements are not designed to be interactive. They are not announced as clickable by screen readers and you can't tab to them if you aren't using a mouse. This is a major accessibility barrier. If you want something for the user to click on, use a link (if you are linking somewhere) or a button (otherwise).

score 1 · Answer 2 · answered Apr 20 '22 at 09:57

According to here:

There has been plenty of valid points made that react inline style is not a good idea. No support for CSS selectors like “:hover”, “:active” “:focus”, “:before” and “:after”, media queries, nor for SCSS syntax, to name a few.

Just use a css file and implement it there with class:hover

Hiba Youssef · Answer 3 · 2022-04-20T10:14:38.620

try this, I Tried it and it works.

App.js:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <span
        style={{
          color: "red",
          cursor: "pointer"
        }}
      >
        Click this.
      </span>
    </div>
  );
}

style.css:

.App {
  font-family: sans-serif;
  text-align: center;
}

span:hover {
  text-decoration: underline !important;
  color: "red";
}

Add Underline When Hover in React and CSS

3 Answers3

Linked