Dash应用：锚点标签hover时无法切换Logo明暗的CSS问题

你的问题核心是CSS选择器的触发范围不对：原来的样式只监听了Logo图片本身的hover事件，而你需要的是当鼠标hover整个锚点（<a>）区域时，就触发Logo的图片切换。

修改方案 #

只需要调整CSS选择器，让样式在锚点标签被hover时作用于内部的Logo元素：

修改后的custom-style.css

.logo{
    content:url("/assets/image_light.jpg");
}

/* 监听锚点标签的hover状态，修改内部的Logo图片 */
a:hover .logo{
    content:url("/assets/image_dark.jpg");
}

原理说明 #

• 原代码中的.logo:hover仅在鼠标直接悬停在<img>元素上时触发；
• a:hover .logo表示：当鼠标悬停在<a>标签（即你的html.A组件）上时，选中其内部所有带有.logo类的元素，触发图片切换。

可选优化（提升体验） #

如果锚点区域的hover范围太小（比如只有文字和图片本身可触发），可以给html.A添加内边距，扩大hover触发区域：

html.A(
  dbc.Row(
    children=[
      dbc.Col(
        children=html.Img(className="logo", height=20, width=20)
      ),
      dbc.Col(
        dbc.NavbarBrand("My Dashboard", className="ms-2")
      ),
   ],
   align="center",
   className="g-0",
  ),
  href="http://localhost",
  style={"textDecoration": "none", "padding": "8px 12px"},  # 添加内边距
),

内容的提问来源于stack exchange，提问作者winter