如何用<style>标签禁用Docfx内置CSS的SVG hover填充样式？

CSS 方法 #

直接通过<style>标签添加样式规则，覆盖Docfx自带的hover效果：

方法1：继承原填充色（通用方案） #

适用于不同path有不同填充色的场景，鼠标悬停时保持path原本的填充颜色：

svg:hover path {
    fill: inherit !important;
}

!important用来强制提升样式优先级，确保覆盖原CSS的规则。

方法2：禁用SVG的hover事件（无交互需求时用） #

如果不需要SVG响应任何鼠标交互，可以直接阻止hover事件触发：

svg {
    pointer-events: none;
}

注意：此方法会让SVG无法响应点击、悬停等所有鼠标事件，仅适合无交互需求的场景。

jQuery 方法 #

通过脚本监听鼠标事件，重置填充样式：

方法1：动态重置hover状态样式 #

$(document).ready(function() {
    $('svg').hover(
        function() {
            // 鼠标悬停时，将path填充色设为当前值，覆盖原hover样式
            $(this).find('path').css('fill', $(this).find('path').css('fill'));
        },
        function() {
            // 鼠标离开时，清空内联样式，恢复原有CSS设置
            $(this).find('path').css('fill', '');
        }
    );
});

方法2：强制固定填充色 #

直接给所有svg path添加内联强制样式，让原hover规则失效：

$(document).ready(function() {
    $('svg path').each(function() {
        var originalFill = $(this).css('fill');
        $(this).css('fill', originalFill + ' !important');
    });
});

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