使用JS寫入CSS將取消：樣式表中定義的懸停屬性

我有兩個div。一個是另一個的父母。當我將鼠標懸停在父項上時，孩子將獲得不同的背景顏色和字體顏色。但是，當我運行更改子元素的內聯樣式的函數switch（）時，懸停屬性被取消。換句話說：在JS上應用CSS後，子背景在懸停時不會改變。使用JS寫入CSS將取消：樣式表中定義的懸停屬性

document.querySelector('button').onclick = function() { 
 
    document.querySelector('.foo').style.backgroundColor = 'green'; 
 
}

.container { 
 
    background-color: lightgrey; 
 
    margin: auto; 
 
    width: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
} 
 
.foo { 
 
    width: 100px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.container:hover > .foo { 
 
    background-color: #c01919; 
 
    color: yellow; 
 
}

<div class="container"> 
 
    <div class="foo">Hey there!</div> 
 
</div> 
 

 
<button>.foo(backgroundColor) -> green</button>

真正的問題是如何防止內嵌樣式而取消CSS：懸停性能？

有沒有辦法讓背景色懸停在之後紅色函數影響了內聯樣式？

來源

2016-08-14 Ivan

其中是JSFiddle鏈接？ –

嗯，我只是把它複製到職位 – Ivan

我認爲沒有，因爲內聯樣式屬性具有最高的風格繼承特權。 – kolboc

真正的問題是如何防止內聯樣式取消CSS：懸停屬性？

缺少使用!important（這是可怕的，所以不），你不能。內聯樣式的一點是，它更具體，任何選擇器。

停止使用內聯樣式。在樣式表中設置綠色，然後通過使用JavaScript來更改元素所屬的類。

document.querySelector('button').onclick = function() { 
 
    document.querySelector('.foo').classList.add('bar'); 
 
}

.container { 
 
    background-color: lightgrey; 
 
    margin: auto; 
 
    width: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
} 
 
.foo { 
 
    width: 100px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.bar { 
 
    background-color: green; 
 
} 
 
.container:hover > .foo { 
 
    background-color: #c01919; 
 
    color: yellow; 
 
}

<div class="container"> 
 
    <div class="foo">Hey there!</div> 
 
</div> 
 

 
<button>.foo(backgroundColor) -> green</button>

來源

2016-08-14 16:21:43 Quentin

所以我不應該使用：'..... style.color ='red''和這種其他JS方法？ – Ivan

@Ivan - 總的來說，他們比他們的價值更麻煩，在這種特殊情況下，他們不會做你想做的事。 – Quentin

非常感謝@Quentin今天我學到了一些東西！ – Ivan

內嵌樣式比在樣式表或<style>標籤定義的樣式更高的特權，除非!important在規則的定義中使用。你的使用案例看起來像是用內聯樣式使按鈕變成綠色，添加一個類（可能是is-clicked）會更好。那麼你會防止醜陋的內聯風格，有一個語義類的命名和沒有問題用css覆蓋該風格。

document.querySelector('.foo').classList.add('is-clicked');

注意：classList在（非常）舊的瀏覽器中不受支持。根據目標受衆，我會說可以使用：http://caniuse.com/#search=classlist

來源

2016-08-14 16:28:18 anykey

HTML元素對象沒有'addClass'方法。 – Quentin

該死的！應該是 document.querySelector（'。foo'）。classList.add（'is-clicked'）; 爲目前使用的瀏覽器的絕大多數。 – anykey

有：http://caniuse.com/#search=classlist :) – anykey

使用JS寫入CSS將取消：樣式表中定義的懸停屬性

回答

相關問題