Your current inline styling style={styles.row} does not support the use of :hover. To enable hover effects, it's necessary to define the :hover rule explicitly in your CSS.
For more information on this topic, refer to this resource.
The pseudo-selector :hover only functions within the CSS stylesheet as it specifies the selection criteria. It doesn't have an equivalent for inline styles.
Alternatively, you can utilize onMouseOver and apply styles dynamically using this approach.
<tr key={id} style={styles.row} onClick={click} onMouseOver={hoverrule}>
An alternative solution is to explore the library Styled-components, which allows nesting of CSS with hover rules effortlessly.
Referencing an example from here:
import React from 'react';
import styled from 'styled-components';
const Div = styled.div`
margin: 40px;
border: 5px outset pink;
&:hover {
background-color: yellow;
}
`;
const Paragraph = styled.p`
font-size: 15px;
text-align: center;
`;
const OutsetBox = () => (
<Div>
<Paragraph>Get started with styled-components 💅</Paragraph>
</Div>
);
export default OutsetBox;
In this context, I haven't provided an example with the tr element since utilizing the Styled-components library may be unnecessary for implementing hover styles alone. However, if you believe adopting this library would enhance your project, feel free to experiment with this solution.