關於僞元素的僞類

好的很清楚，我不是要爲CSS創建（僞）初始值。只是想檢查是否可以在僞元素上添加一個僞類。例如：關於僞元素的僞類

.some-class:after:hover { 
}

似乎沒有工作。

這工作雖然：

.some-class:hover:after { 
}

而且ofcourse，這並不：

.some-class:hover:after:hover { 
}

我所試圖做的是 - 有一個div。如果您將鼠標懸停在該div上，則會在div上附加一個刪除圖標。我想要設置這個圖標的樣式（比如，縮放到1.1左右）。這可能純粹在CSS上？我只需要它在Chrome上工作。

來源

2014-12-27 Udai Arora

所以你把鼠標懸停在'div'上，得到一個圖標，然後你希望能夠將鼠標懸停在圖標上以獲得額外的效果？ – jmore009

這正是我想要的。試圖避免JS和釋放CSS的全部功能。 –

這是不可能的......至少我知道純css –

不，目前的標準不允許將僞類附加到僞元素。僞元素可能出現的唯一位置是複雜選擇器的最後，並且在其後面不會出現其他選擇器或組合器。請參閱spec。

像WebKit的一些實現有自己的規則，但它們是非標準的，不能跨瀏覽器工作。它們也可能不適用於所有僞類和/或所有僞元素。例如，據我所知，:after:hover不適用於任何瀏覽器，包括Chrome瀏覽器。

無論哪種方式，您都需要使用實際元素而不是僞元素。

來源

2014-12-27 06:04:03 BoltClock

正如已經@BoltClock回答說，這是不可能對:after附加一個:hover僞因此，如果你願意，你可以嵌套一個額外的元素的容器元素內，並達到預期的效果。

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid tomato; 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 

 
div span { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
div:hover span { 
 
    display: block; 
 
    transition: font-size .5s; 
 
} 
 

 
div span:hover { 
 
    font-size: 20px; 
 
}

<div> 
 
    <span>X</span> 
 
</div>

這會給你想要的效果，而無需使用任何JavaScript您的網頁上，這個唯一的缺點是，你需要有一個額外的元素，所以如果你沒有任何訪問或許可修改你的HTML，那麼這不適合你，除非你可以使用JavaScript追加一個元素。

來源

2014-12-27 06:11:57

關於僞元素的僞類

回答

相關問題