ブートストラップでホバリングメニューを選択したときにSVGを変更しますか？

Question

私は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>

Answer 1

をナビゲーションバー-逆を持って、あなたは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>

Answer 2

私はおそらくパーティーに遅れていますが、あなたはSVGの塗りつぶしを変更したいです。

これは正しいCSSです：

svg:hover path { 
    fill: red; 
}