Fatal编程技术网
  • html/
  • Html 使用after伪元素的CSS活动选择器

Html 使用after伪元素的CSS活动选择器

html css

Html 使用after伪元素的CSS活动选择器,html,css,css-selectors,pseudo-element,Html,Css,Css Selectors,Pseudo Element,我有一个问题，以实现对积极的图标选择器后，伪选择器。以下是 我尝试过的代码 <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-align: center; height: 35px; line-height: 35px; font-size: 18px; border: 1px solid;

我有一个问题，以实现对积极的图标选择器后，伪选择器。以下是 我尝试过的代码

<html>
<head>
<style type="text/css">
.btn{
width:25%;          
}
.name{
background: #fff;
color: #000;
text-align: center;
height: 35px;
line-height: 35px;
font-size: 18px;
border: 1px solid;  
} 
.name:after{
content: "";
position: absolute;
left: 210px;
top: 19px;
background-image: url('dark.png');
width: 15px;
height: 15px;
background-size: 100% auto; 
}
.name:after:active{
background-image: url('light.png');
}
</style>
</head>
<body>
<div class="btn name">Submit</div>
</body>
</html>


.btn{
宽度：25%；
}
.姓名{
背景：#fff；
颜色：#000；
文本对齐：居中；
高度：35px；
线高：35px；
字号：18px；
边框：1px实心；
} 
.姓名：后{
内容：“；
位置：绝对位置；
左：210像素；
顶部：19px；
背景图片：url（'dark.png'）；
宽度：15px；
高度：15px；
背景尺寸：100%自动；
}
.名称：之后：活动{
背景图片：url（'light.png'）；
}
提交

建议我使用after伪选择器实现活动选择器的方法。
提前感谢。

伪元素需要排在最后：

.name:active:after{
background-image: url('light.png');
}
如果您希望仅在激活伪元素时更改伪元素样式，那么这是不可能的。请参阅以获得解释。

@Prashant:我不确定您是否理解您评论过的我的答案。请重新阅读。如果不需要/不希望父元素处理指针事件，则可以将
指针事件：无和
指针事件：自动。这将导致仅当激活伪元素时才会出现伪元素样式，而如果激活父元素，则不会发生任何事情。