懸停在塊級別鏈接中不起作用

HTML5允許在塊標籤中包裝塊級別。但是，似乎只要先前聲明瞭選擇器的顏色（例如h4），則聲明新的鏈接和懸停顏色不起作用。懸停在塊級別鏈接中不起作用

h4 { 
 
    color: orange; 
 
} 
 

 
.test a:link, .test a:active, .test a:visited { 
 
    color: green; 
 
    display: inline-block; 
 
} 
 

 
.test a:hover { 
 
    color: red; 
 
}

<div class="test"> 
 
    <a href="#"> 
 
     <h4>Heading</h4> 
 
     <p>This is the paragraph</p> 
 
    </a> 
 
</div>

您還可以找到在Codepen這個例子：http://codepen.io/Ixillion/pen/ouBrD

在這個例子中，段落文本具有正確的鏈接顏色（綠色）和懸停顏色（紅色）。 h4標題沒有。
只要您在css中取出h4聲明，它就可以正常工作。不幸的是，這個簡單的解決方案在我的項目中不可行
這是一個CSS錯誤或我做錯了什麼？任何幫助將非常感激。

來源

2014-09-21 Ixillion

您只更改錨標記的顏色，而不是標題元素。如果在HTML5中允許這樣做，那麼這可能是一個CSS錯誤，因爲我沒有看到它。您可以將選擇器縮小爲.test a:hover h4或.test a h4:hover，以較小者爲準。

來源

2014-09-21 00:57:53

這是因爲您要更改懸停時的a標記的顏色，而不是h4標記的顏色。由於h4與您想要更改的文本更接近，因此該標記的CSS將覆蓋您的a標記的CSS。

試試下面的代碼：

.test a:hover h4{ 
    color: red; 
}

，當你將鼠標懸停在a這種情況正在改變的h4顏色。

來源

2014-09-21 00:53:03 AJFarkas

懸停在塊級別鏈接中不起作用

回答

相關問題