Bootstrap 3 滑块错误答案

【问题标题】：GetBootstrap 3 Slider BugBootstrap 3 滑块错误
【发布时间】：2015-04-09 12:51:16
【问题描述】：

我对 GetBootstrap 的经典简单滑块有疑问。

打开此页面。

单击左箭头或右箭头。有一个悬停和焦点。当您悬停或聚焦其中一个箭头时，背景会变暗。当您将鼠标移出箭头时，背景将恢复为默认值。但是……

如果单击箭头，然后将鼠标移出箭头，箭头的悬停类将保留。

通常，如果您将鼠标移出箭头，则意味着您不再关注箭头，并且不应将悬停/焦点类应用于箭头。

我尝试了几天来解决这个问题。谢谢。

【问题讨论】：

键盘可访问性需要:focus 样式。请不要让残疾人更难使用您的网站。
好的，我知道了。当我将鼠标移出箭头时，如何将 :focus 定义更改为消失？
:focus 伪类选择器是内置的 CSS 概念，应用时无法更改。您必须使用 JS 模糊元素或将这些样式移至 :hover，但就像我说的那样，这两种方式都会损害可访问性。
我知道@cvrebert，但相信我，残疾人不会来我正在尝试制作的网站。我确定。

【解决方案1】：

"如果您单击箭头，然后将鼠标移出箭头，则箭头的悬停类将保留。"不是很正确——剩下的是箭头 :focus 定义。单击其他任何地方，它就会消失。（需要注意的是，bootstrap 定义了 :hover 和 :focus 状态）。

您可以删除 :focus 的定义（尽管不是最佳做法）...

在 bootstraps 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, -泰德

【讨论】：

是的，我做到了。但它正在改变一些蓝色的箭头颜色。所以，解决方法是：.carousel-control:hover { color: black; text-decoration: none; filter: alpha(opacity=90); outline: 0 !important; opacity: .9; } .carousel-control:focus { color: white; } 谢谢大家。