如何在悬停时添加图像。在列表中。然后在后记中设置它的样式

Question

在我的列表中。我正在尝试添加图像。在导航栏上名称的右侧。下面你可以看到我正在使用的图片，它是 Photoshop 处理的。因为我不知道如何在 atm 上编码。

悬停时，我喜欢它改变。

我试过了：

ul li: hover { image: url(images/etc.jpg) ; }

即使这样可行，我将如何设计吸盘...这变得太复杂了。记得绝地武士。这是我的第一个站点。

这是 jsfiddle：

.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

下面是一个 jsfiddle 代码，供您参考：https://jsfiddle.net/5ccusmh9/

下面是添加的代码，你只需要用你的背景图片替换那些边框，比如background:url("link")

.left-nav-box ul li {
    position: relative;
}

.left-nav-box ul li:hover:after {
    position:absolute;
    top: 0;
    right: 10px;
    bottom:0;
    height: 20px;

    // replace theses borders
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;

    content:"";
}

Answer 2

基本思路是这样的：

ul li:hover {background: url(images/etc.jpg) no-repeat 100% 50%;}

这将使 image/icon 在悬停时出现在 li 的最右侧。请注意，理想情况是在悬停之前在浏览器中加载图像，这样就没有延迟，但这是一个稍微不同的问题。

如何在悬停时添加图像。在列表中。然后在后记中设置它的样式

How do I add an image on hover. In a list. then style it afterwords

css

html-lists

如何在悬停时添加图像。在列表中。 *然后*在后记中设置它的样式

How do I add an image on hover. In a list. *then* style it afterwords

css

html-lists

如何在悬停时添加图像。在列表中。然后在后记中设置它的样式

How do I add an image on hover. In a list. then style it afterwords