Dash HTML 组件中的 onmouseover

Question

我目前正在使用 plotly/Dash，我对 Dash HTML 组件库有疑问。

因此代码大致如下所示：

import dash
import dash_html_components as html
from jupyterlab_dash import Appviewer

#... some unimportant dash properties

icon_black = 'icon_black.png'
icon_yellow = 'icon_yellow.png'

app.layout = html.Div(id = 'main_body', children = [
    html.Img(id = 'icon', src = icon_black)
])

我想做的是将鼠标悬停在图像上时将 src 更改为 'icon_yellow-png'，但到目前为止我找不到解决方案。我目前正尝试在 CSS 上执行此操作，但我只是想问问是否有更简单的解决方案，我可以直接将其放入 Python 代码中。

Answer 1

您可以在 Python 中使用回调来完成，但我发现 CSS 解决方案对于这个特定的用例来说更干净。如果将 class 分配给 Img 元素，

import dash
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(children=[html.Img(className='icon')])

if __name__ == '__main__':
    app.run_server()

css 文件的内容就是，

.icon{
    content:url("/assets/icon_black.png");
}
.icon:hover{
    content:url("/assets/icon_yellow.png");
}

请注意，以上代码假定您的图标文件位于应用程序旁边名为 assets 的文件夹中。如果您也将 css 文件放入此文件夹，它将自动加载。

Dash HTML 组件中的 onmouseover

onmouseover in Dash HTML Components

html

python

jupyter

plotly-dash