在Dash HTML组件中的onmouseover

Question

我目前正在使用 plotlyDash，我遇到了一个关于 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代码中。我目前正在尝试用CSS来实现这个功能，但我只是想问一下是否有更简单的解决方案，可以直接放到Python代码中。

艾萨克

Answer 1

你可以在Python中用回调来实现，但我发现对于这个特殊的用例来说，CSS的解决方案更加简洁。如果你给 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文件也放在这个文件夹里，它会自动加载。