why hover not working on tr

Question

I try to put hover on tbody and td. It's work well BUT on tr it's not work. I use inline style( js pattern) not CSS code and using Radium.

Here this is my code

<tr key={id} style={styles.row} onClick={click}>
    <td style={stylestd}>
        <span style={styles.data}>asdc</span>
    </td>
</tr>

AND this one is my style.

row: {
    display: 'table-row',
    borderBottom: '1px solid #ddd',
    height: '20px',

   ':hover': {
        cursor: 'pointer',
        backgroundColor: 'red',
    },
},

Thank you.

Possible duplicate of [tr:hover not working](https://stackoverflow.com/questions/7510753/trhover-not-working) — klugjo, Apr 18 '18 at 03:32

score 1 · Answer 1 · answered Apr 18 '18 at 03:41

I've posted the answer and i think this will help you to solve the problem. Write the css code for hover effect seperately.

tr:hover{
  cursor: pointer;
  background-color:red;
}

 <table>
   <tr key={id} style="border 1px solid;" onClick={click}>
         <td>
            <span >asdc</span>
         </td>
  </tr>
  </table>

Bhojendra Rauniyar · Answer 2 · 2018-04-18T04:03:56.277

You are using inline style style={styles.row} and using :hover inside this will not work. You need to define :hover rule in css explicitly.

For more info, see this post.

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

Alternatively, you can use onMouseOver and bind style on this.

<tr key={id} style={styles.row} onClick={click} onMouseOver={hoverrule}>

There's also library Styled-components, and using it allows you to nest css with hover rule.

See this example extracted 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;

I am not giving an example with tr because I don't think you really need this library for just using hover style. If you think it would be better to utilize this library, then I hope you can workout with this solution.

score 0 · Answer 3 · answered Apr 18 '18 at 03:57

Updated code use this one it will work:

<tr key={id} style={styles.row} onClick={click}>
    <td style={stylestd}>
        <span style={styles.data}>asdc</span>
    </td>
</tr>

You can't use inline css for hover, you have to write internal or external css:

tr{
    display: table-row;
    border-bottom: 1px solid #ddd;
    height: 20px;
}
tr:hover{
    cursor: pointer;
    background: #red;
}

why hover not working on tr

3 Answers3