I'm making a menu with an icon and some text, like this:

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

The problem is, I want the icon to be "highlighted" when I hover over the tab, instead of having to hover above the tiny icon. So this is what happens now:

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

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

So my question is how can I hover on one element (the tab is a div), and that activates the hover CSS for another element (the icon).

This is the code for the icon:
(HTML)

```
<a href="#" class="menubutton">
   <span id="playicon"></span> Servers
</a>

```

(CSS)

```
#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

#playicon:hover {
    background-image:url(img/svg/play_hover.svg);
}

```

Thank you in advance! :)