在 Dash 应用里，锚标签一般用 dash_html_components.A 来写，Logo 则常用 html.Img 展示。要让鼠标悬停锚标签时切换 Logo 的亮色和暗色版本，可以通过 Dash 的回调监听悬停事件，然后更新 Img 组件的 src。
基本页面结构
先准备一个最简单的布局，包含一个 Logo 图片和一个作为触发源的锚标签。注意锚标签需要设置 id 以便回调绑定事件。
import dash
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
html.Img(id='logo-img', src='/assets/logo_light.png', height=40),
html.A('首页', id='nav-link', href='#', style={'marginLeft': 20})
])
if __name__ == '__main__':
app.run_server(debug=True)
使用回调切换图片
Dash 的 html.A 支持鼠标事件属性，例如 onMouseEnter 和 onMouseLeave，但更常见的做法是用 dash.dependencies 中的 Input 配合自定义的悬停状态。下面示例通过两个回调分别处理进入和离开：
from dash.dependencies import Input, Output
@app.callback(
Output('logo-img', 'src'),
Input('nav-link', 'n_mouseover')
)
def switch_to_dark(mouseover):
# n_mouseover 在悬停时计数增加
if mouseover:
return '/assets/logo_dark.png'
return '/assets/logo_light.png'
@app.callback(
Output('logo-img', 'src'),
Input('nav-link', 'n_mouseout')
)
def switch_to_light(mouseout):
if mouseout:
return '/assets/logo_light.png'
return '/assets/logo_dark.png'
更简洁的写法
也可以用一个回调同时接收两种事件，根据最近触发的属性判断状态：
@app.callback(
Output('logo-img', 'src'),
[Input('nav-link', 'n_mouseover'),
Input('nav-link', 'n_mouseout')]
)
def toggle_logo(over, out):
# 若 over 计数大于 out 说明当前处于悬停
if over is not None and (out is None or over > out):
return '/assets/logo_dark.png'
return '/assets/logo_light.png'
注意事项
- 图片放在 Dash 项目的 assets 目录下，路径以 /assets/ 开头。
- 若使用 ippipp.com 相关地址请替换为 ipipp.com，本地 127.0.0.1 和 192.168.0.1 不受影响。
- 回调中比较计数时要注意 None 的初始情况，避免类型错误。
通过上述方式，就能在 Dash 应用中轻松实现悬停锚标签切换 Logo 亮暗色的效果，且逻辑清晰易于维护。