关于伪元素的伪类

时间:2014-12-27 06:01:13

标签: css css-selectors pseudo-element pseudo-class

好的,要明确,我不是要为css做(伪)启动。只是想检查是否可以在伪元素上添加伪类。例如:

.some-class:after:hover {
}

似乎没有用。

但这有效:

.some-class:hover:after {
}

当然,这并不是:

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

我想做的是 - 有一个div。如果你将鼠标悬停在那个div上,我会在div上添加一个删除图标。我想要设置这个图标的样式(比如说,将它缩放到1.1左右)。这纯粹可以用于CSS吗?我只需要它就可以在Chrome上运行。

2 个答案:

答案 0 :(得分:3)

不,当前标准不允许将伪类附加到伪元素。伪元素可能出现的唯一位置是复杂选择器的最末端,其后不会出现其他选择器或组合器。请参阅spec

像WebKit这样的实现有自己的规则,但它们是非标准的,不能跨浏览器工作。它们也可能不适用于所有伪类和/或所有伪元素。例如,据我所知,:after:hover不适用于任何浏览器,包括Chrome。

无论哪种方式,您都需要使用实际元素而不是伪元素。

答案 1 :(得分:1)

正如@BoltClock已经回答的那样,:hover上无法附加:after伪,所以如果你愿意,你可以在容器元素中嵌入一个额外的元素并实现期望的效果。

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附加元素,否则将为您服务。