好的,要明确,我不是要为css做(伪)启动。只是想检查是否可以在伪元素上添加伪类。例如:
.some-class:after:hover {
}
似乎没有用。
但这有效:
.some-class:hover:after {
}
当然,这并不是:
.some-class:hover:after:hover {
}
我想做的是 - 有一个div。如果你将鼠标悬停在那个div上,我会在div上添加一个删除图标。我想要设置这个图标的样式(比如说,将它缩放到1.1左右)。这纯粹可以用于CSS吗?我只需要它就可以在Chrome上运行。
答案 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附加元素,否则将为您服务。