Div容器不會改變懸停時的顏色屬性

這是我在堆棧溢出中的第一篇文章，所以我將簡單介紹一下。Div容器不會改變懸停時的顏色屬性

我有this little page，我正在爲我的IT課製作，而且我遇到了相當大的問題。

.float1 { 
    float:right; 
    background-color:#A3635C; 
    margin-top: 150px; 
    margin-bottom: 100px; 
    margin-right: 150px; 
    margin-left: 20px; 
    padding-top: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    padding-left: 20px; 
    transition: 1s; 
} 

.float1:hover { 
    background-color:white; 
    color:#A3635C; 
}

第二容器正方形（紅色背景）不會改變至color: #A3635C;懸停。文字保持白色。

也許有人知道如何使這項工作？

感謝

來源

2014-10-03 polybox

你對你的div裏面的段落標記具有字體顏色設置爲白色。它優先於類float1中的樣式。 – 2014-10-03 20:14:21

...特別是它由一個'id'選擇器設置，因此它優先於類。 – 2014-10-03 20:15:12

因爲你將顏色直接應用於<p>元素，則需要使用該元素更改顏色，而不是父元素。

現在，您有：

.float1:hover{background-color:white;color:#A3635C;}

但是，這不會工作，因爲顏色樣式應用於#white，不.float1

更改它以這樣的：

.float1:hover{background-color:white;} 
.float1:hover p#white {color:#A3635C;}

並且顏色將生效。

編輯：Updated the CodePen

來源

2014-10-03 20:16:05 helllomatt

#white{color:white;font-family: 'Lobster Two', cursive;font-size:400%;}

這條規則重寫你的懸停顏色規則。您的類（.etc）不但在CSS規則鏈中具有較低的優先級，而且還將顏色應用於HTML樹中的一個元素（繼承樹規則始終採用儘可能最低的CSS優先級）

要統計規則的「CSS優先」：

爲每個ID添加100（＃）
添加10對每個類別（.etc）
加1爲每個元素

也許你可以ch ange「white」是一個CSS類，而不是一個ID。你也可以有這樣的規則，或類似：

.float1:hover .white { color: red}

來源

2014-10-03 20:14:59 Katana314

您需要添加

.float1:hover #white{color:#A3635C;}

你有顏色屬性#white，你需要重寫它，因爲它不會繼承顏色從它的變化是家長:)

你也可以把它簡化這樣http://codepen.io/anon/pen/zeuAk

<div class="float1"> 
    <p>Because Color<br>Matters</p> 
</div>

然後用，因爲它是

.float1:hover{background-color:white;color:#A3635C;}

懸停只需添加#white屬性.float1

.float1 { 
    color:white; 
    font-family:'Lobster Two', cursive; 
    font-size:400%; 
    float:right; 
    background-color:#A3635C; 
    margin-top: 150px; 
    margin-bottom: 100px; 
    margin-right: 150px; 
    margin-left: 20px; 
    padding-top: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    padding-left: 20px; 
    transition: 1s; 
}

來源

2014-10-03 20:15:07

你#white選擇比.float1:hover更改更強#white:hover什麼simmilar

來源

2014-10-03 20:15:07 veritas

Div容器不會改變懸停時的顏色屬性

回答

相關問題