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: 
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) :

[![enter image description here](https://i.stack.imgur.com/AvwUY.png)](https://i.stack.imgur.com/AvwUY.png)

I just made a snippet, here it is : <https://codepen.io/Demky/pen/XQQWyj>
You can not do this using css as stylesheet rules don't apply cross documents. By this can be done using javascript as below:

```
var parent = document.querySelector('li')
parent.addEventListener('mouseover', function(event){
  var svg = event.target.querySelector('object').contentDocument;
  var styleElement = svg.createElementNS("http://www.w3.org/2000/svg", "style");
  styleElement.textContent = "svg * { fill: #fff }"; // add whatever you need here
  svg.appendChild(styleElement);
});

```