背景颜色和图像同时悬停

Background color and image on li hover at same time

本文关键字：悬停 图像 颜色 背景      更新时间：2023-09-26

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

.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的代码，我需要同时应用图像和bckground颜色。请有人帮我解决这个问题。

当您只想更改单个值时，不要使用速记表示法。或者另一种方式，如果您使用速记符号，请提供您不想成为"默认"值的所有值。

用：

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

或：

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

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

.menu li {
    background: #color url(path to img);
}
.menu li:hover {
    background: #hover-color url(path to hover-img);
    /* or if only color is changed just write */
    background-color: #hover-color;
}

add

.menu li:hover 
{ 
background:#3EBBEC url(image.jpg) no-repeat;
color: #FFFFFF; 
}

首先，你的HTML应该看起来像这样

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

.CSS

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li a{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}

如果您想添加悬停状态

ul.menu li{display:block; width:100px; height:30px; background:url(yourbackgroundimage.png);}
ul.menu li:hover{background:url(yourhoverbackgroundimage.png);}
ul.menu li a, ul.menu li a:visited{display:block; width:100px; height:30px; background:url(yoursecondbackgroundimage.png);}
ul.menu li a:hover{background:url(yoursecondbackgroundimagehover.png);}
相关文章：