當我有內聯樣式時，CSS中的懸停屬性不起作用

我曾經在HTML文檔上工作過，但我想將hover屬性用於 HTML： div元素，但它不起作用。這裏的HTML的div和我用當我有內聯樣式時，CSS中的懸停屬性不起作用

<div style="opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;"> 
    <p style="font-size: 4em; font-family: verdana; font-weight: blod; text-align: center; color: rgba(112,79,196,1); text-shadow: 5px 5px 2px #000; padding: 10px;"> Special Effects</p> 
</div>

，並在內部CSS樣式CSS的CSS樣式：

div:hover {background-color: red;}

但它沒有工作，直到我刪除了div元素的風格，創造了內部風格類似這樣的HTML元素選擇：

div {opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;} 
    div:hover {background-color: red;}

然後它的工作，但誰能告訴我，爲什麼它不工作的第一次？

來源

2015-06-20 Taro_Naza

工作http://jsfiddle.net/soledar10/7zjsdzyq/ – Dmitriy

可能回答你的問題：http://stackoverflow.com/questions/1033156 /如何到寫ahover功能於直列CSS @Taro_NAZA –

@surajrawat謝謝 –

內聯樣式具有最高優先級。如果您需要在CSS覆蓋，需要使用!important

div:hover {background-color: red !important;}

來源

2015-06-20 16:19:46

內聯樣式可以通過!important重寫，因爲他們需要更多的重視。

div:hover {background-color: red !important;}

有點關於特異性。

既然你有style屬性，它會覆蓋所有其他的事情！這是一個罪使用!important：

來源

2015-06-20 16:21:58

當我有內聯樣式時，CSS中的懸停屬性不起作用

回答

相關問題