Adding an image, only on hover, ontop of [already hover] states

Question

Im new, dont judge.

Thanks for the help earlier, as you can see in the code below its working aligned with an image that changes.

Now I want to add an icon that points. A pointer icon, once hovering over an ordered list item.

So the menu item your highlighting, not only changes color like it does at the moment, but includes an icon.

I've searched. But am stumped. If you can quickly answer go for it, but mainly want to know the logic behind it.

Could I just add it into the "ul li:hover"?

http://jsfiddle.net/RichardTargett/njzLkp62/

.left-nav-box {
    background-color: #fff;
    border: 2px solid #0B88D2; 
    box-sizing: border-box;
    float: left;   
    height: 1500px;
    margin: 0px;
    position: relative;
    width: 225px;
    
}

.left-nav-box:hover {
    background-color: #fff;
    box-sizing: border-box;
    float: left;   
    height: 1500px;
    margin: 0px;
    opacity: .95;
    width: 225px;
}


#logo-image {
    border: 2px solid #0B88D2;
    margin-left: 10px;
    margin-top: 10px;
}

.left-nav-box img.logo {
    position: absolute;
    left: 20px;
    top: 20px;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
}

.left-nav-box img.top:hover {
    opacity: 0;
}




.left-nav-box ul {
    padding: 0px 5px;
    margin: 0px;
    width: 168px;
    position: relative;
    top: 160px;
}

.left-nav-box ul li{
    border: 1px solid #0B88D2;
    box-sizing: border-box;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 198px;

}
.left-nav-box ul li:hover {
    border: 1px solid #0B88D2;
    box-sizing: border-box;
    box-shadow: 0px 3px 0px #0B88D2;
    color: #2B5772;
    font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    list-style-type: none;
    margin: 5px 5px;
    padding: 10px 10px;
    width: 168px;
}


.left-nav-box ul li:nth-child(1):hover {
/*border-bottom: 5px solid red;*/
    box-shadow: 0px 3px 0px red;
  font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande',       lucida, sans-serif;
    text-align: center;
    color: #EE0060;

}

#tumblr01 {
 border: 1px solid green; 
    text-align: center;
     position: relative;
    top: 160px;
    }

<section id="background-wrapper">
    
    <div class="left-nav-box">
       
      <img src="http://unawakened.net/images/intro.jpg" class="bottom logo" width="180">
            <img src="http://unawakened.net/images/intro.jpg" class="top logo" width="180">
        
    <ul>
        <li>Record</li>
        <li>Home</li>
        <li>Art & Media</li>
        <li>Archive</li>
        <li>Forums</li>
        <li>Social</li>
        <li>Sign Up</li>
        <li>Contact Us</li>
    </ul>
   
        
        
        
        
        
        
        
        
        
  
 
    
     
    </div>

Th

Answer 1

If you want a different icon than default browser one, you can choose a personal one in this way:

.left-nav-box ul li { 
cursor: url(images/my_custom_image.png), auto;
}

Answer 2

Add this style:

.left-nav-box ul li { cursor: pointer; }

It will make the mouse a pointer when you hover over the items.

Here is a fiddle for it: http://jsfiddle.net/njzLkp62/1/