Inline CSS styles in React: how to implement a:hover?

Question

I quite like the inline CSS pattern in React and decided to use it.

However, you can't use the :hover and similar selectors. So what's the best way to implement highlight-on-hover while using inline CSS styles?

One suggestion from #reactjs is to have a Clickable component and use it like this:

<Clickable>
    <Link />
</Clickable>

The Clickable has a hovered state and passes it as props to the Link. However, the Clickable (the way I implemented it) wraps the Link in a div so that it can set onMouseEnter and onMouseLeave to it. This makes things a bit complicated though (e.g. span wrapped in a div behaves differently than span).

Is there a simpler way?

You're absolutely right - the only way to simulate :hover etc selectors with inline styles is to use onMouseEnter and onMouseLeave. Regarding the exact implementation of that - it's entirely up to you. To look at your specific example, why not make the <Clickable/> wrapper a span? — Chris Houghton
– Chris Houghton, Commented Feb 6, 2015 at 14:20
i would suggest using external style sheets along with ExtractText Webpack plugin , this will help you on longer run if you ever wish to ServerRender otherwise you can try Radium github.com/FormidableLabs/radium — abhirathore2006
– abhirathore2006, Commented Aug 17, 2016 at 14:05
Currently Styled Component is best solution to simulate all possibilities of css/scss in react. — Ahmad Behzadi
– Ahmad Behzadi, Commented Sep 25, 2017 at 9:51
Well, the C in CSS stands for cascading. When we go inline, we lose cascading features such as :hover — Sarsaparilla
– Sarsaparilla, Commented Feb 11, 2024 at 4:45

Rory · Accepted Answer · 2019-07-18 05:59:27Z

I'm not 100% sure if this is the answer, but its the trick i use to simulate the CSS :hover effect with colours and images inline.

`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);

CSS:

.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

Before hover

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
}

On hover

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

Example: https://codepen.io/roryfn/pen/dxyYqj?editors=0011

gjh · Accepted Answer · 2025-07-03 18:28:32Z

Many useful comments above, but a way which doesn't use any additional technology, honours the sprit of doing it all in html and has the virtue of simplicity would be the following

const FancyLink = () =>
<div className="FancyLink">
    <style>
        {`.FancyLink a:hover {
            color: red;
        }`}
    </style>
    <a href="http://google.com">a fancy link</a>
</div>

const App = () =>
    <div className="App">
        <a href="http://google.com">a default link</a>
        <FancyLink />
    </div>

export default App;

This does have a caveat: it's not valid html - styles ought to appear in a metadata context - but it does work on all browsers. If you need html that validates, you can wrap the script tag in eg Helmet.

Collectives™ on Stack Overflow

Inline CSS styles in React: how to implement a:hover?

32 Answers 32

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

32 Answers 32

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related