Change color of SVG when hover on parent element

Question

I have menu. Each menu item has SVG image and text. SVG is embedded using <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>

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.

Answer 1

I know i'm late but google sent me here for the same problem and i didnt find the solution so here is what I used (hope it help someone):

CSS:

.roundedArea:hover > svg *,
.roundedArea:hover {
  background-color: yellowgreen;
  fill: #FFFFFF;
}

HTML structure:

    <a class="roundedArea">
      <svg>
          *i removed the svg code for reading comprehension*
      </svg>
    </a>

Preview (when you hover the area it change the parent color with green and fill the svg with white) :

I just made a snippet, here it is : https://codepen.io/Demky/pen/XQQWyj