html - 在表行悬停时什么都不做 - 我该怎么做？

Question

我一直在尝试禁用 antd table 的行悬停(对于可扩展行)但没有成功。我想禁用所有子行上的悬停。

这是我使用 antd 生成的一个简单表格。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
    }
];

const data = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
        {
            key: 11,
            name: 'John Brown',
        },
        {
            key: 12,
            name: 'John Brown jr.'
        },
        {
            key: 13,
            name: 'Jim Green sr.'
        },
        ],
    }
];



ReactDOM.render(
    <Table columns={columns} dataSource={data} />,
    document.getElementById('container'),
);

这是 table fiddle显示表格，被渲染。我尝试在悬停时应用更改的 CSS 是:

tr.ant-table-row.ant-table-row-level-1:hover {
   background: red;
}

但这行不通。我看到红色和蓝色之间的颜色波动。我怎么能这样做？

我主要想要的是没有悬停效果。但我无法做到这一点。

Answer 1

试试这个:

.ant-table-tbody > tr.ant-table-row-level-1:hover > td {
  background: unset;
}

那是在你的 fiddle 上工作。

(背景:未设置如@ravibagul91所建议)