如何实现Mermaid流程图节点Hover时改变颜色？

要实现Mermaid流程图节点鼠标悬停变色，你之前的CSS写法存在两处问题：选择器作用对象错误，以及鼠标事件捕获的设置位置不对。调整后的可行代码如下：

<style>
/* 设置节点初始填充色 */
.myId rect {
    fill: red;
}
/* 鼠标悬停时修改节点填充色 */
.myId:hover rect {
    fill: green;
}
/* 确保节点容器能接收鼠标事件 */
.myId {
    pointer-events: all;
}
</style>

flowchart LR
    A:::myId--> B

关键说明： #

• Mermaid生成的流程图节点是由<g>容器包裹<rect>元素，所以需要通过.myId:hover rect来选中悬停状态下的节点矩形
• 给.myId添加pointer-events: all，确保鼠标事件能被节点容器正确捕获，避免Mermaid默认的事件处理干扰hover效果
• 无需使用!important，只要选择器优先级足够就能覆盖Mermaid的默认样式

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