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>

的Th

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;
}

仅在悬停时添加图像，在[已悬停]状态的顶部

2 个答案: