如何爲a：before和a：after編寫：hover條件？

時間 2020-03-16

標籤如何編寫 hover 條件简体版

原文原文鏈接

如何爲a:before編寫:hover和:visited條件？ css

我正在嘗試a:before:hover可是沒有用 html

#1樓

在鼠標懸停時更改菜單連接的文本。（懸停時的不一樣語言文字）這是瀏覽器

jsfiddle示例佈局

的HTML： spa

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

CSS： code

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

#2樓

您也可使用右尖括號（「>」）將操做限制爲一個類，就像我在這段代碼中所作的那樣： htm

<!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>

注意： hover：before開關僅適用於.test1類開發

#3樓

BoltClock的答案是正確的。我要附加的惟一內容是，若是隻想選擇僞元素，則將其放在一個跨度中。 get

例如： it

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

代替：

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

這樣你能夠簡單地說

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

這隻會突出顯示僞元素，不會突出顯示整個li元素

#4樓

嘗試使用.card-listing:hover::after hover和after使用::它WIL工做

#5樓

這取決於您實際要執行的操做。

若是您只是但願在a元素與僞類匹配時將樣式應用於:before僞元素，則須要編寫a:hover:before或a:visited:before 。通知僞元件而來的僞類以後（實際上，在整個選擇器的最末端）。還要注意，它們是兩件事。一旦遇到諸如此類的語法問題，將它們都稱爲「僞選擇器」將使您感到困惑。

若是您正在編寫CSS3，則能夠用雙冒號表示一個僞元素，以使這種區別更加清楚。所以， a:hover::before和a:visited::before 。可是，若是您正在爲IE8和更舊的版本等舊版瀏覽器進行開發，則可使用單一冒號就能夠了。

僞類和僞元素的這個特定的順序在陳述規格：

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

簡單選擇器序列是不禁組合器分隔的一系列簡單選擇器。它老是以類型選擇器或通用選擇器開頭。序列中不容許使用其餘類型選擇器或通用選擇器。

一個簡單的選擇器能夠是類型選擇器，通用選擇器，屬性選擇器，類選擇器，ID選擇器或僞類。

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

可是，對於諸如:hover ^1之類的用戶操做僞類，若是您只須要在用戶與僞元素自己（而不是與a元素）交互時才須要應用此效果，則除了經過一些晦澀的佈局以外，這是不可能的依賴的解決方法。正如文本所暗示的，標準CSS僞元素當前不能具備僞類。在這種狀況下，您須要將:hover應用於實際的子元素，而不是僞元素。

¹ _{固然，這不適用於連接僞類，例如:visited在問題中，由於僞元素不是連接。}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。