I'm trying to implement a rollover into a side menu

Question

.SideMenu1 {                
    padding-top:100px;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    height:100%;  
}

.SideMenu1 a {                       
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s

.XButton {              
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;   /
    margin-left: 50px;
}

@media screen and (max-height: 450px) {   
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<div id="SideMenu" class="SideMenu1">
  <a href="javascript:void(0)" class="XButton" onclick="closeNav()">×</a>   
  <a href="#">Link1</a><br>
  <a href="#">Link2</a><br>
  <a href="#">Link3</a><br>
  <a href="#">Link4</a><br>
</div>

<span style="font-size:30px; cursor:pointer; font-family:Arial" onclick="openNav()">Woosh</span>   <!This is the Open button!>

<script>
function openNav() {
    document.getElementById("SideMenu").style.width = "100%";
}

function closeNav() {
    document.getElementById("SideMenu").style.width = "0";
}
</script>

I'm trying to implement a rollover image when a link is hovered over in a side menu but I'm not having any luck. I want it so when one of the the side menu links is hovered over an image appears beside it, I need 4 separate rollovers one for each link. I've tried setting classes and using :hover but it doesn't seem to work. I have attached the CSS and HTML as just the side menu, if some body could tell me what functions to implement I would very much appreciate it.

Answer 1

This can be accomplished with css with the :after pseudo element. I also added jQuery to this snippet and moved the javascript out into its own file. I did the same with the css. It is best to avoid inline css because when the project gets bigger you will have to dig through and find the inline css vs just going to the global.css file and changing it there.

$(document).ready(function() {
  
 function openNav() {
    document.getElementById("SideMenu").style.width = "100%";
 }

 function closeNav() {
    document.getElementById("SideMenu").style.width = "0";
 } 
  
 $(".woosh").on('click', function() {
   openNav();
   
 });
  
});

.SideMenu1 {                
    padding-top:100px;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    height:100%;  
}

.SideMenu1 a {                       
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

.woosh {
  font-size:30px; 
  cursor:pointer; 
  font-family:Arial;
}

#link1:hover {
  background-color: orange;
 }

a:hover {
    position: relative;
}
a:hover:after {
    content: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150); /* no need for qoutes */
    display: block;
    position: absolute;
    left: 123px; /* change this value to one that suits you */
    top: 6px; /* change this value to one that suits you */
}

.XButton {              
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;   /
    margin-left: 50px;
}

@media screen and (max-height: 450px) {   
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SideMenu" class="SideMenu1">
  <a href="javascript:void(0)" class="XButton" onclick="closeNav()">×</a>   
  <a href="#" id="link1">Link1</a><br>
  <a href="#">Link2</a><br>
  <a href="#">Link3</a><br>
  <a href="#">Link4</a><br>
</div>

<span class="woosh">Woosh</span>   <!This is the Open button!>