tr:hover 重写不会在 Dash 中触发

Question

我是 Dash 的新手，但不是 python 或 html 和 css 的新手。

我有一个相对基本的结构，呈现 DataTable 看起来像：

def render_datatable(df=None, id=None):
    dt1= dash_table.DataTable(
        id=id,
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
        style_data={'height':'auto'},
        fill_width=False,
    )

    return dt1

DataTable 呈现为 html.Div 元素为：

    html.Div(className='col-sm',
             children=my_rendered_datatable
             )

在我的 Project/assets/css/custom.css 中，我有一个简单的覆盖：

*{

    font-family: Poppins;

}


*:hover {background-color: yellow;}

我的网站和我的数据表呈现没有问题：

但是，如您所见，当我将 tr 行悬停时（chrome 检查中的强制状态），我实际上需要悬停在 <div> 与 <tr>.

我的问题是如何在 Dash 中的 DataTable 行中启用悬停？

Answer 1

您可以像这样更改悬停时每一行的背景颜色

table.cell-table tr:hover td.dash-cell {
    background-color: yellow;
}

您之前使用的方法不起作用的原因是您的样式声明缺少 specificity。

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied...

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

tr:hover 重写不会在 Dash 中触发

tr:hover override not triggering in Dash

css

plotly-dash