CSS懸停在容器上

所以我對CSS一般非常瞭解，但是我有一些東西讓我感到困惑。這裏的目標是容器內的元素集合同時具有相同的懸停效果。這裏是到目前爲止的代碼： HTML：CSS懸停在容器上

<a href="" class="link-block no-decoration"> 
    <h6 class="uppercase">whitepaper</h6> 
    <div class="section-break section-break-sm"> 
     <h4>Cras Fusce Fermentum Tortor Porta 4</h4> 
     <span class="icon-file icon-2x"></span> 
    </div> 
</a>

CSS：

.link-block *:hover { 
    color: #0eb2ff !important; 
    border-top-color: #0eb2ff; 
}

所以這裏的重要的一類是鏈接塊，目標，如上所述，是簡單地強制所有元素在該類中使用這些懸停屬性。

這裏是什麼需要：

但這裏發生的事情：

感謝任何中肯的意見！

來源

2016-08-19 tganyan

你嘗試'。鏈路塊：懸停* {...}'？ – ochi

我做了，以及下面的兩個建議。看起來我可以從中得到最好的結果是文本元素只在特定的時候纔會改變顏色，而不是當容器被徘徊時，這不是所期望的結果。 – tganyan

a是一個內聯元素，因此您需要將其設置爲display：block，然後您可以直接將：hover狀態應用於它。

.link-block { 
 
    display:block 
 
} 
 
    
 
    .link-block:hover { 
 
    color: #0eb2ff !important; 
 
    border-top-color: #0eb2ff; 
 
}

<a href="" class="link-block no-decoration"> 
 
    <h6 class="uppercase">whitepaper</h6> 
 
    <div class="section-break section-break-sm"> 
 
     <h4>Cras Fusce Fermentum Tortor Porta 4</h4> 
 
     <span class="icon-file icon-2x"></span> 
 
    </div> 
 
</a>

來源

2016-08-19 00:05:42 gavgrif

偉大的建議，我沒有想到這一點。給它一個upvote，因爲它是合理的邏輯，可悲的是沒有綠色檢查，因爲它沒有完全解決問題（圖標和邊框現在突出顯示懸停;但是，文本元素，只有當你專門懸停在他們身上時突出顯示，而不是當你只是在容器上盤旋我注意到了一些全局性的東西在玩，所以看起來我可能正在處理特殊性問題，如果是這樣的話，我會回來帶着一個綠色的檢查ya;）。 – tganyan

只要改變

.link-block *:hover {

到

.link-block:hover {

來源

2016-08-19 00:07:49 levu

Upvoted，因爲這是一個明智的建議，不幸的是這是我已經嘗試過，並沒有解決問題。 – tganyan

CSS懸停在容器上

回答

相關問題