CSS內聯樣式忽略懸停效果

我只是在玩CSS，注意到一個有趣的場景，我無法找到解釋。也許你們中的一些人有這個答案。CSS內聯樣式忽略懸停效果

我有一個div元素與內嵌樣式

<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>

我的CSS

#text-sample { 
    width:200px; 
    white-space: nowrap; 
} 

#text-sample:hover { 
    overflow:visible 
}

這裏懸停效果不適用。也就是說，overflow: visible規則沒有采取。

注意：移動溢出：隱藏內聯樣式將解決問題。

我正在尋找懸停效果不適用的原因。任何人都可以解釋這個場景

來源

2017-06-20 ajeshrkurup

檢查控制檯是否觸發懸停;檢查css屬性是否被覆蓋。 –

嘗試更改寬度＆nowrap懸停也！ – Alex

其他所有相同，內聯樣式優先於通過樣式表規則應用的樣式。在你的情況下，當懸停時，通過樣式表規則調用overflow: visible，但不能覆蓋內聯樣式。如有必要，您可以嘗試!important。

#text-sample { 
 
    width: 200px; 
 
    white-space: nowrap; 
 
} 
 

 
#text-sample:hover { 
 
    overflow: visible !important; 
 
}

<div id="text-sample" style="overflow:hidden;"> 
 
    This is a sample text to test the CSS behavior of inline styling 
 
</div>

但它會更容易簡單地在#text-sample樣式規則中指定的，而不是內聯給它overflow: hidden。

來源

2017-06-20 06:47:42

謝謝你解釋這個。增加重要的是工作。 – ajeshrkurup

您的內聯樣式將始終覆蓋您的外部CSS。您可以使用!important在:hover

#text-sample { 
    width:200px; 
    white-space: nowrap; 
} 

#text-sample:hover { 
    overflow:visible!important; 
}

來源

2017-06-20 06:49:33 Pratyush

內聯樣式優先於樣式表。有兩種方法可以更改：使用JavaScript或在樣式表中使用!important。

#text-sample:hover { 
    overflow:visible !important; 
}

來源

2017-06-20 06:50:06

有但是儘量不要用！重要 –

在CSS中，有一些東西叫Specificity。簡單地說，像

#id { color: red; }

有類似<div id="id" class="blue">時會優先於類似

.blue { color: red; }

。看下面的例子。這是因爲ID選擇器（#）被解釋爲比類更重要。以同樣的方式，具有稍後聲明（稍後在文件中）的同樣具體的選擇器優先，選擇器越具體，它就越重要。

對於您的示例：內聯樣式優先於寫入CSS文件中的任何內容（除非使用!important）。我相信:hover不會改變任何事實。

有關詳細規則，請查看我上面的鏈接。

div { 
 
    width:200px; 
 
    white-space: nowrap; 
 
} 
 

 
#text-sample:hover, 
 
#sample-2:hover { 
 
    overflow:visible; 
 
} 
 

 
#sample-2 { 
 
    overflow: hidden; 
 
} 
 

 
#foo { 
 
    color: red; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div> 
 

 
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div> 
 

 
<div id="foo" class="blue">foo</div>

編輯

正如評論所說，特異性並不適用於內聯樣式。儘管如此，內聯樣式優先於文件中CSS聲明的任何內容。但是，只要將規則移至相同的CSS文件中（正如您所提及的那樣），:hover比其他規則更重要，因爲它在您懸停的時刻更具體。

來源

2017-06-20 06:54:35 SVSchmidt

內聯樣式與特異性無關。特定性適用於樣式表中的規則。無論是否應用了給定的樣式，首先基於它是內嵌的，然後是樣式表規則適用於該規則的特定性。這個特殊問題與特異性無關。 – 2017-06-20 06:56:13

@torazaburo我看到了，我不知道這個詞不適用。但是，因爲內聯樣式是最具體的，所以我認爲這不會改變我的答案的一般結論（內聯優先）。 – SVSchmidt

@torazaburo更新我的信息。我認爲這應該沒問題。 – SVSchmidt

CSS內聯樣式忽略懸停效果

回答

相關問題