选择时使颜色停留在 CSS 元素上答案

【问题标题】：Make a color stay on CSS element when selected选择时使颜色停留在 CSS 元素上
【发布时间】：2016-01-25 15:26:40
【问题描述】：

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

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

我尝试了 :selected 等的变体，但无济于事。有任何想法吗？我知道 jQuery 也可能是一种选择，但我的 Javascript 知识几乎不存在，并且插件开发人员不提供自定义支持。

【问题讨论】：

你尝试过 :active 吗？
通常情况下，更改页面后，活动菜单会获得一个活动类..检查是否有一个并使用它
是的，我试过了：active。因此，单击时元素会发生变化。我只需要元素继续以这种方式显示，直到选择另一个项目。
所以现在我们有了.va-picker-item:hover { background-color: #000; } .va-picker-item:focus { background-color: #FFF; } .va-picker-item:active { background-color: #FFF; color: red; }
你检查过选定元素的 HTML 吗？也许 Woo Commerce 会为其添加一个类，您可以使用它在 CSS 中定位它。

标签： html css wordpress woocommerce

【解决方案1】：

您需要将 href 属性添加到您的 html 链接元素，以便您可以使用 :focus 伪选择器

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

CSS

.va-pickers a {
  color: blue;
  cursor: pointer;
}
.va-pickers a:focus {
  color: red;
}
.va-pickers a:hover {
  color: green;
}

演示 -> https://jsfiddle.net/8d483ze4/

或更好地使用 jQuery -> https://jsfiddle.net/8d483ze4/1/

【讨论】：

【解决方案2】：

事实证明，当元素被选中时，确实添加了一个类，使其易于定位。感谢大家的有益建议。

【讨论】：

【解决方案3】：

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

jQuery

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

CSS

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

查看我的jsfiddle 演示。

【讨论】：