爲什麼：懸停不指定的

類

<a class="deletelink" onclick="return !deleteitem('delete.php')" href="delete.php"> Delete Item </a>

與下面的CSS：

a.deletelink:hover, 
a.deletelink:active { 
    background-color: #F00; 
    color:#FF0; 
} 

a.deletelink:visited, 
a.deletelink:link { 
    line-height:5em; 
    width: 5em; 
    text-align: center; 
    margin:2em; 
    display: block; 
    font-weight: bold; 
    color:#F00; 
    background-color:#639; 
    padding: 0.5em; 
    text-decoration: none; 
}

但鏈接的顏色不會改變鼠標時移動它。你能猜到這裏有什麼問題嗎？

感謝

來源

2014-09-02 Ormoz

鏈接總是「訪問」你作爲一個開發人員，所以這些樣式覆蓋較早的'：hover'樣式。 – 2014-09-02 10:10:50

謝謝大家，這個問題通過改變懸停和鏈接的順序來解決，正如你所建議的。 – Ormoz 2014-09-02 10:21:23

注意:hover一定要來:link和:visited僞類之後，否則它不會影響因素。

a.deletelink:visited ,a.deletelink:link{ /* ... */ } 
a.deletelink:hover, a.deletelink:active { /* ... */ }

從MDN page：

這種風格可以通過任何其他鏈接相關的僞類，即覆蓋：鏈接，：visited和：活躍，出現在後續規則。

爲了適當鏈接樣式，你需要把:hover 規則:link和:visited規則後，但在:active之一，由LVHA順序定義之前：:link - :visited - :hover - :active。

來源

2014-09-02 10:10:37

只要改變的懸停行爲順序：

a.deletelink:visited ,a.deletelink:link{line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;} 
a.deletelink:hover, a.deletelink:active{ background-color: #F00; color:#FF0;}

working demo here

：懸停後，必須:link , :visited

使用您應該遵循LoVeHAte˚F其中L表示鏈接，V表示訪問，H表示懸停，A表示激活。

來源

2014-09-02 10:10:59

a.deletelink:active{ background-color: #F00; color:#FF0;} 
a.deletelink:hover { background-color: #F00;color: #FF0;} 
a.deletelink:visited {line-height:5em;width: 5em;text-align: center; margin:2em;display:  block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;} 
.deletelink {line-height:5em;width: 5em;text-align: center; margin:2em;display: block;font-weight: bold;color:#F00;background-color:#639;padding: 0.5em;text-decoration: none;}

應該爲你做

來源

2014-09-02 10:17:58 MateenAC

你有後:link和:visited性質使用hover：

a.deletelink:visited, 
a.deletelink:link { 
    line-height:5em; 
    width: 5em; 
    text-align: center; 
    margin:2em; 
    display: block; 
    font-weight: bold; 
    color:#F00; 
    background-color:#639; 
    padding: 0.5em; 
    text-decoration: none; 
} 

a.deletelink:hover, 
a.deletelink:active{ 
    background-color: #F00; 
    color:#FF0; 
}

來源

2014-09-02 10:30:20 user3074446

爲什麼：懸停不指定的

回答

相關問題