在引导程序中悬停菜单时更改 SVG？答案

【问题标题】：Change SVG When Hovering Menu In Bootstrap?在引导程序中悬停菜单时更改 SVG？
【发布时间】：2017-08-08 14:14:50
【问题描述】：

我正在制作一个bootstrap-inverse 菜单，但是，我想制作它，所以当您将鼠标悬停在菜单上时，SVG 徽标会更改为 fill: #fff; 而不是默认的 #000 颜色默认。目前，我的代码如下：

   .navbar-inverse:hover {
background: #fff;
}

<nav class="navbar navbar__home navbar-fixed-top">
    <div class="menu">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <div class="navbar-brand navbar-brand-centered"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="297.000000pt" height="51.000000pt" viewBox="0 0 297.000000 51.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0 -75
0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M350 255 l0 -245 55 0 55 0 0 95 0 95 28 0 c24 0 32 -11 77 -95 l50
-95 58 0 c31 0 57 2 57 5 0 2 -27 48 -60 102 -51 84 -57 99 -44 108 68 43 92
93 80 161 -16 82 -88 114 -261 114 l-95 0 0 -245z m205 161 c37 -16 52 -48 41
-92 -8 -29 -57 -54 -106 -54 l-30 0 0 80 0 80 30 0 c17 0 46 -6 65 -14z"/>
<path d="M790 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1170 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1550 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0
-75 0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M1882 262 c-40 -130 -73 -241 -72 -245 0 -4 24 -7 52 -5 l53 3 14 52
14 53 78 0 78 0 12 -55 12 -55 58 0 57 0 -17 58 c-10 31 -44 141 -76 245 l-58
187 -66 0 -66 0 -73 -238z"/>
<path d="M2290 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
<path d="M2650 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
</g>
</svg>
</div>

        </div>


        <div class="collapse navbar-collapse" id="navbar-brand-centered category-tabs">
            <ul class="nav navbar-nav">
                <li data-toggle="modal" class="boxed" data-target="#nav-modal"><a class="ion-drag" style="font-size:32px;"></a></li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

【问题讨论】：

您需要针对您面临的问题创建一个工作演示。
@hunzaboy 目前只是默认的导航栏。我只是想这样做，当您将鼠标悬停在导航栏反转上时，背景变为白色，导航栏链接变为＃333，并且 SVG 徽标变为不同的颜色，但我没有尝试任何工作））：
你的代码除了 svg 什么都没有显示。我们无法在没有看到任何东西的情况下为您提供适当的帮助。尝试创建一个小提琴并将您的代码放入其中。

标签： html css twitter-bootstrap svg

【解决方案1】：

由于结构没有 navbar-inverse 并且您想要填充 svg 元素而不是 div，因此您想要更改目标元素。

   .navbar-brand:hover svg path {
fill: #fff;
}

<nav class="navbar navbar__home navbar-fixed-top">
    <div class="menu">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <div class="navbar-brand navbar-brand-centered"><svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="297.000000pt" height="51.000000pt" viewBox="0 0 297.000000 51.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0 -75
0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M350 255 l0 -245 55 0 55 0 0 95 0 95 28 0 c24 0 32 -11 77 -95 l50
-95 58 0 c31 0 57 2 57 5 0 2 -27 48 -60 102 -51 84 -57 99 -44 108 68 43 92
93 80 161 -16 82 -88 114 -261 114 l-95 0 0 -245z m205 161 c37 -16 52 -48 41
-92 -8 -29 -57 -54 -106 -54 l-30 0 0 80 0 80 30 0 c17 0 46 -6 65 -14z"/>
<path d="M790 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1170 255 l0 -245 150 0 150 0 0 35 0 35 -95 0 -95 0 0 75 0 75 75 0
75 0 0 35 0 35 -75 0 -75 0 0 65 0 65 90 0 c82 0 90 2 90 19 0 11 3 26 6 35 5
14 -11 16 -145 16 l-151 0 0 -245z"/>
<path d="M1550 255 l0 -245 55 0 55 0 0 100 0 100 75 0 75 0 0 35 0 35 -75 0
-75 0 0 75 0 75 84 0 c78 0 84 1 90 23 13 48 14 47 -139 47 l-145 0 0 -245z"/>
<path d="M1882 262 c-40 -130 -73 -241 -72 -245 0 -4 24 -7 52 -5 l53 3 14 52
14 53 78 0 78 0 12 -55 12 -55 58 0 57 0 -17 58 c-10 31 -44 141 -76 245 l-58
187 -66 0 -66 0 -73 -238z"/>
<path d="M2290 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
<path d="M2650 255 l0 -246 147 3 148 3 6 38 6 37 -99 0 -98 0 0 205 0 205
-55 0 -55 0 0 -245z"/>
</g>
</svg>
</div>

        </div>


        <div class="collapse navbar-collapse" id="navbar-brand-centered category-tabs">
            <ul class="nav navbar-nav">
                <li data-toggle="modal" class="boxed" data-target="#nav-modal"><a class="ion-drag" style="font-size:32px;"></a></li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

【讨论】：

只是为了澄清为什么这有效而您的答案无效。这个答案将您的选择器从 .navbar-inverse:hover 更改为 .navbar-brand:hover svg 路径。 .navbar-inverse 类不适用于 HTML 页面上的任何元素。它还针对 SVG 元素中的路径元素。
好的。我会解释的
谢谢！我们只是想确保为我们的答案添加解释，以便人们了解他们的错误在哪里。

【解决方案2】：

我可能迟到了，但你想更改 svg 的填充。

这是正确的 css：

svg:hover path {
    fill: red;
}

【讨论】：