同时使用 :after 和 :hover

Posted 2023-03-05

【中文标题】同时使用 :after 和 :hover

【英文标题】：using both :after and :hover

【发布时间】：2013-03-11 06:08:57

【问题描述】：

是否可以仅使用:hover 显示:after 伪？例如使用替代元素。

#parent
#childdisplay:none;
#parent:hover >#childdisplay:block;

就我用相同的方法得到的：

#parent
#parent:aftercontent:'hi';display:none;
#parent:hover  #parent:afterdisplay:block;

有可能吗？还是我在自欺欺人？

【问题讨论】：

你试过#parent:hover:after吗？

你try it了吗？

@SnareChops 我有，但我留下了这样的空间 #parent:hover :after 是我的问题吗？大声笑

是的，删除空格，这应该会有所帮助

@Beneto #parent:hover :after 将设置#parent 的子元素:after 的样式，而不是设置实际#parent 的:after 的样式。

【参考方案1】：

您可以将两者结合起来：

#parent:hover:after 
    content:'hi';

JSFiddle.

【讨论】：

Ack，cruel world 我们生活在对神圣投票的永恒追求中！ ;-)

【参考方案2】：

是的。不知道你为什么不自己尝试，但有可能：

#parent:hover:aftercontent:'hi';

http://jsfiddle.net/uz3w4/

【参考方案3】：

当然可以：

Demo

<a href="#">Demo</a>

a:hover:after 
    content: 'blah';