如何寫：懸停條件爲：之前和之後？

391

這要看情況。

如果您只是希望在a元素相匹配的僞類將樣式應用到:before僞元素，你需要寫a:hover:before或a:visited:before來代替。注意僞元素後僞類（並且實際上，在整個選擇器的最後）。還要注意它們是兩個不同的東西;把它們稱爲「僞選擇器」會讓你感到困惑，一旦遇到這樣的語法問題。

如果您正在編寫CSS3，您可以使用雙冒號表示一個僞元素，以使此區別更清晰。因此，a:hover::before和a:visited::before。但是，如果您正在開發IE8等舊版瀏覽器，那麼您可以輕鬆使用單個冒號。

僞類和僞元素的這種特定順序在spec指出：

一個僞元素可以被附加到簡單選擇器中的選擇器的最後一個序列。

A 簡單選擇器的序列是不由組合器分隔的簡單選擇器鏈。它總是以類型選擇器或通用選擇器開始。序列中不允許使用其他類型選擇器或通用選擇器。

A 簡單選擇器是類型選擇器，通用選擇器，屬性選擇器，類別選擇器，ID選擇器或僞類。

僞類是一個簡單的選擇器。但是，僞元素不是，即使它類似於簡單的選擇器。

然而，如:hover用戶動作僞類，如果你需要這個效果適用僅當用戶與僞元素本身，而不是a元素進行交互，那麼這是不是除了通過一些模糊的佈局相關的解決方法之外可能。正如文中所暗示的那樣，標準的CSS僞元素當前不能具有僞類。在這種情況下，您需要將:hover應用於實際的子元素而不是僞元素。

_{當然，這並不適用於僞類鏈接如:visited如在問題，因爲僞元素都沒有聯繫。}

來源

2011-04-25 10:10:47 BoltClock

+22

應當指出的是，它將在懸停父元素 - 這會導致應用裝修即使::後pseudoelement不是鼠標下，只要它的父母是。 – SamGoody 2012-06-26 09:23:34

+5

還應該注意的是，由於指定了佈局規則的方式，有很多事情*不會*對此做出響應 - 例如， '文本decoration'。 – 2013-04-21 00:16:34

+1

@Chris Krycho：的確 - 我實際上碰巧對這個與僞元素有關的特定問題有解釋[這裏]（http://stackoverflow.com/questions/11474780/hoverbefore-text-decoration-none-has-無效果/ 11481121＃11481121）。當然，值得澄清的是，問題本身與僞類/僞元素*選擇器*沒有關係，但正如您指出的那樣，佈局問題。 – BoltClock 2013-04-21 03:00:28

69

寫a:hover::before而不是a::before:hover：example。

來源

2011-04-25 10:11:59 sandeep

+4

正確的語法將是：hover :: – mikkelbreum 2013-06-05 20:42:48

+2

@mikkelbreum你有參考證明嗎？ – shea 2014-03-02 02:36:38

+3

@bungeshea：這是CSS3語法。請參閱我的回答下的評論（以及我最近的編輯）。將它稱爲「正確的語法」有點不準確，因爲CSS1/2僞元素允許單冒號和雙冒號。我將其稱爲* recommended *語法，因爲今天繼續使用傳統語法的唯一原因是支持IE8及更早版本。 – BoltClock 2015-01-13 18:07:02

3

在鼠標懸停上更改菜單鏈接的文本。（懸停不同語言文本）這裏是

jsfiddle example

HTML：

<a align="center" href="#"><span>kannada</span></a>

CSS：

span { 
    font-size:12px; 
} 
a { 
    color:green; 
} 
a:hover span { 
    display:none; 
} 
a:hover:before { 
    color:red; 
    font-size:24px; 
    content:"ಕನ್ನಡ"; 
}

來源

2013-04-24 09:17:31 Rao

+1

這是一個可愛的答案。事實上，它激發了我[略微擴展你的小提琴]（http://jsfiddle.net/YSgKL/784/），將span文本的字體大小提高到24px以匹配替換文本，並添加了3個非在替換文本之前和之後分隔空間，以便它們佔據相同的寬度，並使用'text-decoration：underline'設置'a：hover :: before'，這將導致下劃線拾取替換文本的紅色。 – 2016-08-11 02:43:47

-1

您還可以與一類使用限制你的行動右尖括號（「>」），正如我在此代碼中所做的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
    span { 
    font-size:12px; 
    } 
    a { 
     color:green; 
    } 
    .test1>a:hover span { 
     display:none; 
    } 
    .test1>a:hover:before { 
     color:red; 
     content:"Apple"; 
    } 
    </style> 
</head> 

<body> 
    <div class="test1"> 
    <a href="#"><span>Google</span></a> 
    </div> 
    <div class="test2"> 
    <a href="#"><span>Apple</span></a> 
    </div> 
</body> 

</html>

注：懸停：交換機只能在.test1類

來源

2015-07-30 17:16:47

0

前BoltClock的答案是正確的。我想追加的唯一的事情是，如果你只想選擇僞元素，放入一個跨度。

比如：

<li><span data-icon='u'></span> List Element </li>

代替：

<li> data-icon='u' List Element</li>

這樣，你可以簡單地說

ul [data-icon]:hover::before {color: #f7f7f7;}

這隻會凸顯僞元素，而不是整個li元素

來源

2017-04-24 18:09:17 bbrinx

2

嘗試使用::使用.card-listing:hover::afterhover和after它西港島線工作

來源

2017-08-09 12:48:18

如何寫：懸停條件爲：之前和之後？

回答

相關問題