Pseudo-class：active僅在Firefox中不適用

我正在構建滑塊組件，此時應該在鼠標按鈕被按下時應用僞類：active，並在釋放它時將其移除。這在Chrome中完美運行，但似乎並不適用於Firefox。Pseudo-class：active僅在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; 
}

我在角工作，所以我提供了這樣的一個例子搶劫者：https://plnkr.co/edit/q7ixAlVsjNdQb8bA54hE?p=preview

有人可以解釋什麼是問題，我該如何解決它？主動類在Chrome中按預期應用，但不是Firefox。

我已經考慮Active Pseudo CSS class not working for textbox in Firefox但我認爲這是一個不同的問題，因爲OP期待：積極發揮作用一樣：重點

感謝

來源

2017-08-31 Cristophs0n

的[active僞類CSS不能在Firefox工作文本框]可能的複製（https://stackoverflow.com/questions/30433379/active-pseudo-css-class-not-working-for- textbox-in-firefox） – sol

我不認爲這是重複的。我認爲那篇文章是用戶期望的：活動功能與以下內容相同：focus – Cristophs0n

直到獲得解決方案時，您可以在開始和結束時使用回調。分別添加活動和刪除類。 –

我有交叉檢查代碼，看來適當的距離你的結局。它是一個庫，它阻止DOM應用的元素上綁定了幾個點擊事件：點擊時激活。

所以我建議在github上報告這個問題，直到那個時候使用@hostlistners回調來處理這個情況。

你可以檢查他們是如何實施鼠標的。使用相同的方法並應用活動課程。

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

來源

2017-08-31 17:27:15

感謝您的配偶！ – Cristophs0n

Pseudo-class：active僅在Firefox中不適用

回答

相關問題