Question: I am creating the nav bar for my website and I want to make a hover state so when you mouse over either the home, work, or contact tag a star appears. Is this possible to add via code or do I need to convert this text to an image to do so. See images for what I created in XD.

[navigation with star hover](https://i.stack.imgur.com/AIap2.png)

[plan navigation with out star hover](https://i.stack.imgur.com/cySap.png)

Answer: 
Yeah you can do this pretty easily with CSS like this:

```css
.star {
  visibility: hidden;
}
.items:hover .star{
  visibility: visible;
}
```

```html
<div class="items"><span class="star">&#9733;</span>hello world</div>
```

Here is an example with an image used.

```css
.star {
  visibility: hidden;
  max-width: 20px;
  max-height: 20px;
}
.items:hover .star{
  visibility: visible;
}
```

```html
<div class="items">
<img Class="star" src="https://www.mariowiki.com/images/thumb/8/8a/New_Super_Mario_Bros._U_Deluxe_Super_Star.png/1200px-New_Super_Mario_Bros._U_Deluxe_Super_Star.png"/>hello world</div>
```
There is a JAVASCRIPT solution which is more efficient.

```
<html>
<head>
<title>
star appear
</title>
<style type="text/css">
    #stardiv
    {
        height: 16px;
        width: 25px;
    }
</style>
</head>
<div style="opacity:0;" id="stardiv">☆</div><div onmouseout="document.getElementById('stardiv').style.opacity= '0';" onmouseover="document.getElementById('stardiv').style.opacity= '1';">HOVER ME</div>
</html>

```

JSFIDDLE:<https://jsfiddle.net/Lhobpwq9/>