Blazor Server中绑定onclick的NavLink hover时鼠标指针异常如何解决

问题原因 #

Blazor的NavLink组件未传入href属性时，最终渲染的<a>标签不会携带href属性，浏览器默认不会为这类无href的a标签应用可点击元素的默认样式（包括pointer光标、hover高亮效果），但绑定的onclick事件本身是正常生效的，所以会出现功能正常但样式异常的情况。

可选修复方案 #

方案1：添加伪href属性（最简方案） #

给绑定onclick的NavLink加上href="javascript:void(0)"属性，浏览器会将其识别为正常可点击链接，自动继承现有NavLink的所有hover样式，且不会触发页面跳转：

<NavLink href="javascript:void(0)" @onclick="YourClickHandler">
    自定义交互菜单项
</NavLink>

方案2：自定义独立样式（不使用JS伪协议） #

如果不想用javascript:void(0)，可以单独加自定义CSS实现：

1. 在全局CSS文件（通常是wwwroot/css/site.css）中添加样式：

/* 可点击导航项样式 */
.clickable-nav-item {
    cursor: pointer;
}
/* 保持和带href的NavLink hover效果一致 */
.clickable-nav-item:hover {
    /* 这里替换为你项目中NavLink的hover样式，Blazor默认模板对应样式如下 */
    color: var(--bs-nav-link-hover-color);
    text-decoration: underline;
}

2. 给对应NavLink添加自定义类即可：

<NavLink class="clickable-nav-item" @onclick="YourClickHandler">
    自定义交互菜单项
</NavLink>

方案3：全局统一样式 #

如果所有无href的NavLink都需要可点击样式，可以直接全局覆盖，不需要单独加类：

.nav-link:not([href]) {
    cursor: pointer;
}
.nav-link:not([href]):hover {
    color: var(--bs-nav-link-hover-color);
    text-decoration: underline;
}

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