javascript - li 上的背景颜色和图像同时悬停

Question

我有一个代码，我想同时应用图像和背景颜色。谁能帮我解决这个问题？

CSS

    .menu, .menu ul
{
    width:1000px;
    background-color: #F3F3F3;
    margin: 0;

}
.menu{  padding: 0; height:30px;}
.menu li
{
    float: left;
    padding-top:3px;
    height:20px;
    text-align:left;
    text-transform:uppercase; 
    position: relative; 
    display: block;
    font-family: Tahoma;
    font-size: 8px;
    font-weight:bold;
    text-align: center;
    text-decoration: none;
    padding:10px 15px 0 15px;
    background:url(../image/border.png) no-repeat right center;
}

.menu li:hover
{       
    background:#3EBBEC; 
    color: #FFFFFF;
}
.menu a { text-decoration: none; color:#000000; }
.menu a:hover { text-transform:lowercase; }

HTML

<ul class="menu">
   <a href="#"><li>A</li></a>  
   <a href="#"><li>B</li></a> 
   <a href="#"><li>C</li></a>
   <a href="#"><li>D</li></a>   
</ul>

这是我需要同时应用图像和背景颜色的 HTML 和 CSS 代码。请有人帮我解决这个问题。

Answer 1

当您只想更改单个值时，不要使用简写符号。或者换句话说，如果您使用速记符号，请提供您不希望成为“默认”值的所有值。

使用:

.menu li:hover
{       
    background-color: #3EBBEC; 
}

或:

.menu li:hover
{       
    background: #3EBBEC url(...) ...; 
}

请记住，当您使用简写时，所有未提供的值都将退回到它的默认值，而不是它的继承值。