Html 选择时使颜色保持在CSS元素上

试图找到一种方法，使CSS元素保持与选中元素时悬停时设置的颜色相同。这是一个商业网站上的大小变化

我的CSS代码是：

.va-picker-item:hover {
background-color: #000;
}

.va-picker-item:focus {
    background-color: #FFF;
}

这很好用

HTML是：

    <div class="va-separator clear"></div>
    <label class="va-attribute-label">Size</label>
    <div class="va-pickers">
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="small" title="Small" ><span class="va-picker-item va-text S" >S</span></a>
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="medium" title="Medium" ><span class="va-picker-item va-text M" >M</span></a>
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="large" title="Large" ><span class="va-picker-item va-text L" >L</span></a>
    </div>
    <!-- /.va-pickers -->
    <div class="va-separator clear"></div>
</div><!-- /.ql-visual-variations -->

大小
s
M
L

---

我尝试过：selected等的变体，但没有效果。有什么想法吗？我知道jQuery也可能是一个选项，但我的Javascript知识实际上不存在，插件开发人员也不支持定制。

您需要向html链接元素添加href属性，以便使用：focus pseudo selector

HTML

 <div class="va-separator clear"></div>
    <label class="va-attribute-label">Size</label>
    <div class="va-pickers">
        <a href="#" class="va-picker va-picker-text " data-attribute="pa_size" data-term="small" title="Small" ><span class="va-picker-item va-text S" >S</span></a>
        <a href="#" class="va-picker va-picker-text " data-attribute="pa_size" data-term="medium" title="Medium" ><span class="va-picker-item va-text M" >M</span></a>
        <a href="#" class="va-picker va-picker-text " data-attribute="pa_size" data-term="large" title="Large" ><span class="va-picker-item va-text L" >L</span></a>
    </div>
    <!-- /.va-pickers -->
    <div class="va-separator clear"></div>
</div><!-- /.ql-visual-variations -->

演示->

---

或更好地使用jQuery->

事实证明，在选择某个类时，该类确实添加到了元素中，因此很容易找到目标。谢谢大家的建议。

我有一个简单的解决方案。只需使用此jQuery并按如下方式更新css：

jQuery

$('.va-pickers .va-picker').click(function(){
    $('.va-pickers .va-picker').removeClass('selected');
    $(this).toggleClass('selected');
})

CSS

---

查看我的演示。

是否尝试：活动？通常，更改页面后，“活动”菜单将获得一个活动类。。检查是否有并使用它是的，我尝试过：活动。因此，单击时元素会发生更改。我只需要元素继续以这种方式显示，直到选择了另一个项目。因此，现在我们有了

.va picker项：hover{background color:#000；}.va picker项：focus{background color:#FFF；}.va picker项：active{background color:#FFF；color:red}

是否检查了所选元素的HTML？也许Woo Commerce为它添加了一个类，您可以使用它在CSS中定位它。

$('.va-pickers .va-picker').click(function(){
    $('.va-pickers .va-picker').removeClass('selected');
    $(this).toggleClass('selected');
})

.va-pickers .va-picker.selected{
   background:black;
   color:white;
}