背景顏色和圖像在同一時間懸停

我有一個代碼，我想同時應用圖像和背景顏色。任何人都可以幫助我嗎？背景顏色和圖像在同一時間懸停

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顏色的代碼。請有人幫我這個。

來源

2012-05-07 Jhilom

首先...您的HTML標記是錯誤的！ – fesh

添加

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

來源

2012-05-09 11:38:09 Jhilom

當您只想更改單個值時，請勿使用簡寫符號。或者換句話說，如果您使用簡寫符號，請提供您不想成爲「默認」值的所有值。

用途：

或：

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

請記住，當你使用短手，那是沒有提供所有的值將還原到它的默認不將其繼承的值。

來源

2012-05-07 11:22:26 Yoshi

那麼我怎樣才能申請一個圖像 – Jhilom

@Jhilom使用適當的屬性，例如， 'background-image'，'background-position'等等。 – Yoshi

'background：＃3ebbec url（'myimage.jpg'）' – HyderA

首先你的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);}

來源

2012-05-07 12:27:24 fesh

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

來源

2012-05-07 12:38:14 jumancy

背景顏色和圖像在同一時間懸停

回答

相關問題