顯示：當通過CSS懸停在父元素上時

當我將鼠標懸停在父元素本身上時，是否有可能display:block;:after僞元素？顯示：當通過CSS懸停在父元素上時

#myDiv{ 
    position:relative; 
    width:50px; 
    height:50px; 
    border-style:solid; 
    background-color:red; 
} 
#myDiv:after{ 
    position:absolute; 
    content:""; 
    display:none; 
    width:50px; 
    height:50px; 
    border-style:solid; 
    background-color:blue; 
}

我已經厭倦了：

#myDiv:hover #myDiv:after{ 
    display:block; 
} 
#myDiv:hover + #myDiv:after{ 
    display:block; 
} 
#myDiv:hover > #myDiv:after{ 
    display:block; 
}

但沒有運氣，這裏有一個fiddle。

來源

2013-03-18 Ali Bassam

將其更改爲#myDiv:hover::after

您可以使用:after或::after但選擇模塊（3）它指出後者現在打算用於區分它們與僞類

來源

2013-03-18 23:25:18 user2129623

該規範表示，向後兼容使用'：'而不是'::'可以。它指出新的僞元素只能用'::'工作，但舊的元素都支持這兩種。 – kapa 2013-03-18 23:29:28

非常感謝我的工作 – 2015-01-02 07:52:03

您正在嘗試引用相同的元素，因此您不需要複製ID選擇器。無需要麼使用子選擇器，只需使用：

#myDiv:hover:after { 
    display: block; 
}

jsFiddle Demo

來源

2013-03-18 23:25:04 kapa

顯示：當通過CSS懸停在父元素上時

回答

相關問題