伪类 :active 仅在 Firefox 中不适用答案

【问题标题】：Pseudo-class :active not applied in Firefox only伪类 :active 仅在 Firefox 中不适用
【发布时间】：2018-02-09 14:56:13
【问题描述】：

我现在正在构建一个滑块组件，并且应该在按住鼠标按钮时应用伪类 :active 并在释放鼠标按钮时将其移除。这在 Chrome 中完美运行，但似乎不适用于 Firefox 中的类。

CSS：

.thumb.lower.button.wide:active {
    background: red;
  }

HTML：

<div class="container-fluid">

<div class="row">

    <div class="col-md-12">
        <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>
    </div>

    <div class="col-md-6 p-r-md p-b-md">
        <p class="text-black p-b-md">Button Handle - Custom Labels</p>
        <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>
    </div>
</div>

打字稿：

import { Component } from '@angular/core';
import { SliderValue, SliderOptions, ColorService, SliderStyle, SliderCalloutTrigger, SliderSize, SliderSnap, SliderType } from 'ux-aspects';

@Component({
selector: 'app',
templateUrl: './src/app.component.html'
})
export class AppComponent {

slider1: SliderExample;

lowerValue: number = 25;
upperValue: number = 75;

constructor(colorService: ColorService) {

    this.slider1 = {
        value: 50,
        options: {
            track: {
                ticks: {
                    major: {
                        steps: [0, 50, 100],
                        labels: true,
                        formatter: (value) => {
                            if (value === 0) {
                                return 'Minimum';
                            }
                            if (value === 50) {
                                return 'Default';
                            }
                            if (value === 100) {
                                return 'Maximum';
                            }
                        }
                    },
                    minor: {
                        show: false
                    }
                }
            }
        }
    };
}

interface SliderExample {
  value: number | SliderValue;
  options: SliderOptions;
}

我在 Angular 中工作，所以我在 plunker 中提供了一个示例：https://plnkr.co/edit/q7ixAlVsjNdQb8bA54hE?p=preview

谁能解释一下问题是什么以及如何解决？ :active 类在 Chrome 中按预期应用，但在 Firefox 中没有。

我已经考虑过Active Pseudo CSS class not working for textbox in Firefox，但我认为这是一个不同的问题，因为 OP 期望 :active 与 :focus 功能相同

谢谢

【问题讨论】：

Active Pseudo CSS class not working for textbox in Firefox的可能重复
我不认为这是重复的。我认为该帖子是用户期望 :active 与 :focus 功能相同
在获得解决方案之前，您可以在开始和结束时使用回调。分别添加活动和删除类。
我也能用最新的 FF 重现这个。似乎是一个错误。我检查了滑块的来源 - github.com/UXAspects/UXAspects/blob/develop/src/components/… - ux-slider 对其模板中的每个元素都使用了大量的类绑定和侦听器，所以我只是想知道它是否以某种方式导致 firefox 错过/忽略活动。我将首先在具有尽可能少的绑定的基本版本中重新创建 ux-slider 组件，然后看看它是否有效
好的。会做的谢谢。

标签： javascript html css angular

【解决方案1】：

我已经交叉检查了代码，从您的角度来看似乎是正确的。它是一个在阻止 DOM 应用的元素上绑定少量点击事件的库：点击时激活。

所以我建议在 github 上报告这个问题，然后使用 @hostlistners 回调来解决这个问题。

您可以检查他们如何实现鼠标上下移动。使用相同的方法并应用活动类。

https://github.com/UXAspects/UXAspects/blob/develop/src/components/slider/slider.component.ts

【讨论】：