在同一個元素中定義僞類和僞元素

Question

我的問題其實很簡單，就是我想要做的是:hover,:after和:before，我想要在嵌入相同元素後懸停anf，查看我的css代碼： -

#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before { 
    background-position: 65% 65.7%; 
} 

這裏的元素在:before一個圖標，可我CNT刪除或修改的，也是我想有它的懸停效果...

這個任何解決方案，我的控制檯不顯示懸停效果？

Answer 1

有趣的問題。如果你能夠向我們展示一個可行的例子，我們可能會有更多的幫助。

然而，從理論上講，你試圖做的事情沒有什麼不妥（儘管不是所有的瀏覽器都會喜歡它：特別是IE8及以下版本）。

瞭解這裏最重要的是，:hover是一個僞類，而:before是一個僞元素。

下面是the standard快速摘錄（與感謝this answer以前在堆棧溢出）：

僞類在選擇任何地方可以使用，而僞元素 可能只是最後的一個簡單選擇之後附加選擇器。

您所犯的錯誤在於您的語法：您追加的順序。

試試這個：

#sidebar .widget li a:hover:before, 
#sidebar .widget li a.active:before { 
    background-position: 65% 65.7%; 
} 

，你想這應該做的。然而，這不會給你很大的跨瀏覽器覆蓋範圍，它不是所有瀏覽器都支持的東西。

一個更好的辦法是：

• 重置:before元素不了了之（覆蓋您無法訪問的樣式）;
• 使用錨點上的非重複背景圖像（顯示圖像），填充 - 留下縮進;
• 然後，您可以使用:hover在CSS中的錨點上以任何您認爲合適的方式切換背景圖像。

這會給你更好的跨瀏覽器兼容性。