錨定標記無法在懸停css上工作

Question

我遇到了這個奇怪的問題，出於某種原因，我的錨定標記無法在懸停或活動狀態下工作。

<span class="subHeaders"> 
<a href="" />First </a> 
</span> 

<span class="subHeaders"> 
<a href="" />Second </a> 
</span> 

<span class="subHeaders"> 
<a href="" />third </a> 
</span> 


// css 
.subHeaders a:link { 
    text-decoration: none; 
} 

.subHeaders a:active { 
    color: yellow; 
} 
.subHeaders a:hover{ 
    cursor: pointer; 
    color: red; 
} 

subheaders a：link class only works，hover and active do not。

Answer 1

您在使用的HTML中有錯誤<a/></a>，您應該使用<a></a>。使用此：

<span class="subHeaders"> 
<a href="" >First </a> 
</span> 

<span class="subHeaders"> 
<a href="" >Second </a> 
</span> 

<span class="subHeaders"> 
<a href="" >third </a> 
</span> 

Answer 2

你一個標籤是否還在與 A /關閉，只使用一個純粹

Answer 3

取出/

<span class="subHeaders"> 
    <a href="">third </a> 
</span> 

還要檢查你的CSS沒有其他的樣式發生衝突。

Answer 4

您不需要關閉這樣的錨標籤的第一部分。

這裏是爲你工作更新：http://jsfiddle.net/tyhzh8gt/1/

<span class="subHeaders"> 
    <a href="" >First </a> 
</span> 

<span class="subHeaders"> 
    <a href="" >Second </a> 
</span> 

<span class="subHeaders"> 
    <a href="" >third </a> 
</span> 

Answer 5

添加重要的;！

<span class="subHeaders"> 
    <a href="" />First </a> 
    </span> 

    <span class="subHeaders"> 
    <a href="" />Second </a> 
    </span> 

    <span class="subHeaders"> 
    <a href="" />third </a> 
    </span> 

    .subHeaders a:link { 
     text-decoration: none; 
    } 

    .subHeaders a:active { 
     color: yellow !important; 
    } 
    .subHeaders a:hover{ 
     cursor: pointer; 
     color: red !important; 
    }