內嵌CSS工作不適合我的李

Question

我試圖像下面的一個新background hover color設置爲我的li tag 但我無法設置

請指導我在語法上。

<nav class="icons-example"> 
         <ul> 
         <li><a href="#"><span class="font-icon-social-facebook" style=":hover a { background-color: blue;}"></span></a></li> 
<li><a href="#"><span class="font-icon-social-tweeter" style=":hover a { background-color: nevyblue;}"></span></a></li> 
    </ul> 
    </nav> 

在CSS文件

.icons-example ul li:hover a, 
.icons-example ul li.active a { 
background-color: red; 
} 

我想設置藍色爲懸停請幫助我。

是的，我可以改變css本身，而是我需要改變每個li separatly 例如用於facebook blue爲tweeter navyblue的顏色？

任何一個可以給我確切的CSS改變每個李

Answer 1

這應該做的伎倆：

.icons-example ul li:hover a, 
.icons-example ul li.active a { 
background-color: red; 
} 

.icons-example ul li:hover a span.font-icon-social-facebook, 
.icons-example ul li.active a span.font-icon-social-facebook { 
background-color: blue; 
} 

.icons-example ul li:hover a span.font-icon-social-twitter, 
.icons-example ul li.active a span.font-icon-social-twitter { 
background-color: navy; 
} 

等等......

Answer 2

內聯CSS是針對DOM對象直接風格。

您無法告訴它style=":hover a { background-color: blue;}"

Answer 3

的style attribute for HTML elements只支持CSS屬性。它不支持CSS選擇器。

爲了實現每個列表項目的不同顏色，您需要在樣式表中分別定位每個列表項目。東西的效果：

.icons-example ul li:hover a, 
.icons-example ul li.active a { 
    background-color: red; 
} 

.icons-example ul li:hover .font-icon-social-facebook 
{ 
    background-color: blue; 
} 

你不妨「臉譜」的類屬性添加到該元素的LI，所以你可以這樣做：

.icons-example ul li.facebook:hover a 
{ 
    background-color: blue; 
} 

Answer 4

的聲明添加到您的樣式表

.icons-example ul li.active a { 
    background-color: red; 
} 
.icons-example ul li.active a span:hover { 
    background-color: blue; 
}