添加圖像，僅在懸停時，[已懸停]狀態的頂部

Question

即時消息新，不判斷。

感謝您的幫助，因爲您可以在下面的代碼中看到它的工作與變化的圖像對齊。

現在我想添加一個指向圖標。一個指針圖標，一旦懸停在有序列表項上。

因此，突出顯示的菜單項不僅像當前所做的那樣改變顏色，而且還包含一個圖標。

我已經搜查過。但是我很難過。如果你可以快速回答，但主要想知道它背後的邏輯。

我可以將它添加到「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>

釷

Answer 1

添加這種風格：

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

這會使得鼠標指針，當鼠標懸停的項目。

這裏是它的一個小提琴：http://jsfiddle.net/njzLkp62/1/

Answer 2

如果你想要比默認的瀏覽器一個不同的圖標，你可以選擇一個個人的這種方式：

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