Ничего не делать при наведении строки таблицы - Как я могу это сделать?

Question

Я пытался отключить наведение строк для таблицы antd (для расширяемых строк), но безуспешно.Я хочу отключить наведение на все дочерние строки.

Вот простая таблица, которую я генерирую с помощью 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'),
);

Вот таблица 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;
}

Это работает на твоей скрипке.

(background: unset как предложено @ ravibagul91)

Answer 2

Это место, где вы можете изменить этот эффект,

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background: unset; //Change the existing color to `unset`
}