使用after偽元素的CSS活動選擇器

Question

我在偽選擇器之后打開活動圖標選擇器時要實現一個問題。 下面是嘗試的代碼。

<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>

向我建議使用偽選擇器之后實現主動選擇器的方法。 提前致謝。

Answer 1

偽元素需要排在最后：

.name:active:after{
background-image: url('light.png');
}

如果您僅在激活偽元素時才希望更改偽元素樣式，則不可能。 請參閱此答案以獲取解釋。

使用after偽元素的CSS活動選擇器

問題描述

1 個解決方案

解決方案1
6 2014-04-10 10:49:58

使用after偽元素的CSS活動選擇器

問題描述

1 個解決方案

解決方案1 6 2014-04-10 10:49:58

解決方案1
6 2014-04-10 10:49:58