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: 
When you're working with `svg`, you can change colors using `fill` and `stroke` properties instead of regular `background-color` and `color`. For example:

```css
li:hover {
  background-color: yellow;
}

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

```html
<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>
```
Just add a hover listener to the parent element.

```js
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';
})
```

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

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

```html
<div class="parent">
  <div class="pretendThisIsTheSVG">

  </div>
<div>
```