显示：当通过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悬停在父元素上时

回答

相关问题