Do nothing on table row hover - How could I do this?

Question

I have been trying to disable the row hover for antd table (for expandable rows) but no success. I want to disable the hover on all child rows.

Here is a simple table that I am generating using 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'),
);

Here is the table fiddle that shows the table, that gets rendered. The CSS that I am trying to apply the change the hover is:

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

But this does not work. I see a fluctuation of colors between red and blue. How could I do this?

What I mainly want is no hover effect. But I am unable to do this.

Answer 1

Try this :

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

That's working on your fiddle.

(background: unset as suggested by @ravibagul91)