GetBootstrap 3 Slider Bug

GetBootstrap的經典簡單滑塊出現問題。GetBootstrap 3 Slider Bug

打開此頁面。

http://getbootstrap.com/examples/carousel/

點擊向左或向右箭頭。有一個懸停和焦點。當您懸停或聚焦其中一個箭頭時，背景會變暗。將鼠標移出箭頭時，背景將恢復爲默認值。但是......

如果你點擊箭頭，然後移動鼠標箭頭出來的，箭頭的懸停類將保持。

通常情況下，如果你移動鼠標箭頭出來的，這意味着你不再和類重點箭頭懸停/焦點不應在箭頭上。

我想了幾天解決這個問題。謝謝。

來源

2015-02-09 Dale Obradović

的'：需要鍵盤accessibili focus'風格TY。請不要讓殘疾人難以使用您的網站。 – cvrebert 2015-02-09 18:08:52

好的，我知道。我如何改變這一點：當我將鼠標移出箭頭時，焦點定義消失了？ – 2015-02-09 18:09:49

'：focus'僞類選擇器是一個內置的CSS概念，當它適用時你不能改變。你必須使用JS來模糊元素，或者將這些樣式移動到'：hover'中，但正如我所說的那樣，這些都會影響可訪問性。 – cvrebert 2015-02-09 18:15:14

「如果你點擊箭頭，然後移動鼠標箭頭出來的，箭頭的懸停類將保持不變。」是不是很正確 - 這是箭頭：重點定義仍然存在。點擊其他任何地方，消失。（但要注意，bootstrap一起定義了：懸停和：焦點狀態）。

您可以刪除的定義：重點（雖然不是最好的做法）...

在白手起家的CSS文件，你會發現這一點：

.carousel-control:focus, .carousel-control:hover { 
    color: #fff; 
    opacity: 0.9; 
    outline: 0 none; 
    text-decoration: none; 
}

它改成這樣：

.carousel-control:hover { 
    color: #fff; 
    opacity: 0.9; 
    outline: 0 none; 
    text-decoration: none; 
}

HTH， -Ted

來源

2015-02-09 18:09:01 Ted

是的，我做到了。但它正在改變一些藍色箭頭的顏色。所以，對此的修正是： '.carousel-control：hover { color：black; text-decoration：none; filter：alpha（opacity = 90）; 提綱：0！重要; 不透明度：0.9; } .carousel控制：焦點{ 顏色：白色; }' 謝謝你們。 – 2015-02-09 18:14:35

GetBootstrap 3 Slider Bug

回答

相關問題