为什么悬停在tr上不起作用答案

【问题标题】：why hover not working on tr为什么悬停在tr上不起作用
【发布时间】：2018-04-18 12:26:45
【问题描述】：

我尝试将鼠标悬停在 tbody 和 td 上。它工作得很好，但在 tr 上它不起作用。我使用内联样式（js 模式）而不是 CSS 代码并使用 Radium。

这是我的代码

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

这是我的风格。

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

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

谢谢。

【问题讨论】：

tr:hover not working的可能重复
您使用的是哪个预处理器？
@user615274 我用reactjs运行渲染中的所有数据

标签： javascript css reactjs

【解决方案1】：

您正在使用内联样式 style={styles.row} 并在其中使用 :hover 将不起作用。您需要在 css 中明确定义 :hover 规则。

有关详细信息，请参阅此post。

:hover 是一个伪选择器，对于CSS，只在样式表中有意义。没有任何等效的内联样式（因为它没有定义选择标准）。

或者，您可以使用onMouseOver 并在其上绑定样式。

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

还有库Styled-components，使用它可以让你用悬停规则嵌套css。

请看这个摘自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;

我没有给出一个 tr 的例子，因为我认为你真的不需要这个库来使用悬停样式。如果您认为使用此库会更好，那么我希望您可以使用此解决方案进行锻炼。

【讨论】：

【解决方案2】：

我已经发布了答案，我认为这将帮助您解决问题。单独编写悬停效果的css代码。

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

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

【讨论】：

【解决方案3】：

更新后的代码使用这个就可以了：

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

悬停不能使用内联css，必须编写内部或外部css：

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

【讨论】：