title: Change color of SVG when hover on parent element
body: <p>I have menu. Each menu item has SVG image and text. SVG is embedded using <code>&lt;object&gt;</code></p>
  
  <pre><code>&lt;ul id="menu-content" class="menu-content collapse out"&gt;
    &lt;li id="calculator"&gt;
      &lt;a href="#"&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;object type="image/svg+xml" data="assets/calculator.svg"&gt;
            &lt;/object&gt;
          &lt;/td&gt;
          &lt;td class="menu-option"&gt;
            &lt;span class="menu-option"&gt;
              Pricing &amp; Services
            &lt;/span&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    .....
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I hover on menu item, background color of this item changes. But I also need to change SVG color. For now I know how to change SVG color when you hover exactly on it. But what to do when I hover on parent element. </p>