Question

我在css中有一个菜单，其图标是svg。将鼠标悬停在按钮上时，通过CSS过渡更改图标的颜色。有趣的是，并非所有按钮都有效。这取决于href的内容。为什么呢？

这有效：

<li class="navButton">
  <a id="home" href="home.php">
   <span class="icon">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" width="30px" height="30px" 
     viewBox="0 0 512 512" enable-background="new 0 0 512 512" 
     xml:space="preserve">

      <path class="icon_path" fill="white" 
       d="M256,69.972L50,275.815h42.507v166.213h326.985V275.815H462L256,69.972z 
          M374.492,397.028h-73.767v-86.495 h-89.451v86.495h-73.768V251.99
          L256,133.587l118.492,118.402V397.028z"/>
    </svg>
   </span>
   <span class="text">Home</span>
  </a>
</li>

这不起作用：

<li class="navButton">
  <a id="projects" href="projects.php">
    <span class="icon">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" width="30px" height="30px" 
     viewBox="0 0 512 512" enable-background="new 0 0 512 512"
     xml:space="preserve">

       <path class="icon_path" fill="white" 
        d="M436.631,207.445v163.681L279.232,462V298.319L436.631,207.445z 
           M256,258.08l180.201-104.04L256,50 L75.799,154.041L256,258.08z 
           M232.768,298.319L75.369,207.445v163.681L232.768,462V298.319z"/>
    </svg>
    </span>
    <span class="text">Projects</span>
  </a>
</li>

如果我更改href内容，例如projects2.php有效。太疯了..

Chrome中的CSS svg颜色转换错误

0 个答案: