親要素上にマウスを置くと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の色を正確に上に移動するとSVGの色を変更する方法を知っています。しかし、私が親要素にマウスを置いたときに何をするか。

Answer 1

だから何私がやったことです： 1）私はIDを与えたのindex.htmlで） 2（私はhttp serverを使用）アプリケーションがサーバー上で実行されていることを確認しました

<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中：：SVG（ID = '帽子'）および親要素（ID = 'MI-帽子'）に

$(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' 
    }) 
}); 

Answer 2

親要素にホバーリスナーを追加するだけです。

var parent = document.querySelector('.parent') 
 
parent.addEventListener('mouseover', function(){ 
 
    parent.children[0].style.backgroundColor = 'black'; 
 
}) 
 
parent.addEventListener('mouseout', function(){ 
 
    parent.children[0].style.backgroundColor = 'white'; 
 
})

.pretendThisIsTheSVG {\ 
 
    background-color: white; 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid black; 
 
} 
 

 
.parent { 
 
    width:100px; 
 
    height:100px; 
 
    border:1px solid red; 
 
}

<div class="parent"> 
 
    <div class="pretendThisIsTheSVG"> 
 
    
 
    </div> 
 
<div>

Answer 3

あなたはsvgで作業しているときは、fillとstrokeプロパティの代わりに、定期的なbackground-colorとcolorを使用して色を変更することができます。たとえば：スタイルシートのルールは、クロス文書を適用しないよう

li:hover { 
 
    background-color: yellow; 
 
} 
 

 
li:hover circle { 
 
    fill: violet; 
 
    stroke: blue; 
 
}

<ul id="menu-content" class="menu-content collapse out"> 
 
    <li id="calculator"> 
 
    <a href="#"> 
 
     <tr> 
 
     <td> 
 
      <svg> 
 
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
      </svg> 
 
     </td> 
 
     <td class="menu-option"> 
 
      <span class="menu-option"> 
 
      Pricing & Services 
 
      </span> 
 
     </td> 
 
     </tr> 
 
    </a> 
 
    </li> 
 
</ul>