将鼠标悬停在父元素上时更改 SVG 的颜色

Question

我有菜单。每个菜单项都有 SVG 图像和文本。SVG 嵌入使用<object>

<ul id="menu-content" class="menu-content collapse out">
  <li id="calculator">
    <a href="#">
      <tr>
        <td>
          <object type="image/svg+xml" data="assets/calculator.svg">
          </object>
        </td>
        <td class="menu-option">
          <span class="menu-option">
            Pricing & Services
          </span>
        </td>
      </tr>
    </a>
  </li>
  .....
</ul>

当我将鼠标悬停在菜单项上时，此项的背景颜色会发生变化。但我还需要更改 SVG 颜色。现在我知道当你完全悬停在它上面时如何改变 SVG 颜色。但是当我悬停在父元素上时该怎么办。

Answer 1

所以我所做的是：1）确保应用程序正在服务器上运行（我使用http server）2）在index.html中，我给了SVG id（id ='hat'）和父元素（id ='mi-hat'） ）：

<li id="m-i-hat">
  <a href="#" class="menu-item">
    <object class="menu-icon" id="hat" type="image/svg+xml" data="assets/hat.svg">
    </object>

3）在Index.js中：

$(document).ready(function() {
var hat = document.getElementById("hat");
var parent_hat = document.getElementById("m-i-hat")

// It's important to add an load event listener to the object,
// as it will load the svg doc asynchronously
hat.addEventListener("load",function(){
  // get the inner DOM of image
  var svgDoc = hat.contentDocument;
  // get the inner element by id (in my svg I have a path i need to change with 
  //id='Hat')
  var area = svgDoc.getElementById("Hat");
  // add behaviour
  parent_hat.addEventListener("mouseover",function(){
   area.style.fill = '#fff'
  });
  parent_hat.addEventListener('mouseout', function(){
   area.style.fill = '#50BC99'
  })
});