在悬停时更改 SVG 移动汉堡包图标的颜色

Question

我正在尝试更改移动汉堡包菜单图标以在鼠标悬停时适合我的徽标颜色 -

.menu-hamburger:hover {
  fill: #FFB400!important;
}

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

但还是没有运气

Answer 1

试试这个。

svg.menu-hamburger :hover {
      fill: #FFB400!important;
    }

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

Answer 2

当使用 <use xlink:href="#" 时，SVG 内容落入 DOM shadow 样式结果取决于外部样式层次结构，内部 CSS 样式 sheet， SVG 表示样式这些风格的斗争结果并不总是那么容易预见..

因此，在相邻的答案中，规则 fill: #FFB400!important; 但这是一个非常糟糕的做法，它会破坏布局的其余部分。

样式层次结构可以在文章的下图中看到：Sara Soueidan Styling SVG Content with CSS

计算样式 具有最大权重。
因此，CSS样式使用CSS变量是最靠谱的。

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: red;
 cursor:pointer;
 }
  #u2:hover {
 --primary-color: green;
 }

<a href="#"> 

<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u1" xlink:href="#menu-hamburger"  ></use>
</svg> 
<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u2" xlink:href="#menu-hamburger"  ></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
            <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
            </g>
       </symbol>
  
</svg>

更新

通过应用 CSS 个变量，您可以实现 multi-color 个图标

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: green;
 --second-color: gold;
 --third-color: red;
 cursor:pointer;
 }
  #u2:hover {
  --primary-color: purple;
 --second-color: greenyellow;
 --third-color: dodgerblue;
 }

<a href="#"> 
    <svg class="menu-hamburger" width="96" height="96" viewBox="0 0 16 16">
       <use id="u1" xlink:href="#menu-hamburger"  ></use>
    </svg>  
</a>
<a href="#"> 
    <svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
       <use id="u2" xlink:href="#menu-hamburger"  ></use>
    </svg> 
</a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
       <defs>
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
             <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2" style="fill: var(--primary-color)"></rect>
            <rect y="7" width="16" height="2" style="fill: var(--second-color)"></rect>
            <rect y="13" width="16" height="2" style="fill: var(--third-color)"></rect>
            </g>
       </symbol>
  </defs>
</svg>

Answer 3

在此示例中，我将 <a> 更改为 <button>，因为单击它的操作不是导航某处，而是打开菜单。它具有相同的属性。使用 button#menu-hamburger svg 选择器和填充颜色可以控制菜单的宽度和高度。因此，现在使用类似的选择器 (button#menu-hamburger:hover svg) 悬停菜单会毫无问题地更改颜色。我将悬停添加到按钮，这样当指针位于汉堡菜单中的栏之间时，您也可以“悬停”。

button#menu-hamburger {
  display: block;
  border: none;
  background: transparent;
}

button#menu-hamburger svg {
  fill: #000;
  width: 16px;
  height: 16px;
}

button#menu-hamburger:hover svg {
  fill: #FFB400;
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <defs>
    <symbol id="menu-hamburger" viewBox="0 0 16 16">
      <rect y="1" width="16" height="2"></rect>
      <rect y="7" width="16" height="2"></rect>
      <rect y="13" width="16" height="2"></rect>
    </symbol>
  </defs>
</svg>

<button id="menu-hamburger"> 
  <svg xmlns="http://www.w3.org/2000/svg">
    <use href="#menu-hamburger"/>
  </svg>
</button>

在悬停时更改 SVG 移动汉堡包图标的颜色

Change Color of SVG mobile hamburger icon on Hover

html

css

svg

更新