如何删除或改进：Bootstrap Carousel 上的焦点样式？

Posted 2023-03-07

【中文标题】如何删除或改进：Bootstrap Carousel 上的焦点样式？

【英文标题】：How to remove or improve :focus style on Bootstrap Carousel?

【发布时间】：2016-09-10 14:55:44

【问题描述】：

我用 bootstrap 做了一个轮播，但是 ":focus" 不能很好地工作。

看看这个引导：http://www.bootply.com/iGyjdSSrhC

如果您单击 V 形“下一步”，它将保持“白色”（如悬停）。这是因为 :focus 样式与 :hover 相同。

我尝试将 :focus 更改为与非悬停相同，但之后它不会在悬停时更改...

我认为该按钮不会“重置”自身，并且认为它一直都是焦点。我该如何改变呢？

【参考方案1】：

元素会在悬停时改变，但如果它被聚焦，它不会在悬停时改变，因为当你改变 :focus 时，它会覆盖旧样式，所以你需要在焦点+悬停时添加样式，它会正常工作

.carousel-control:focus 
    opacity: 0.5;


.carousel-control:focus:hover 
    opacity: 0.9;

在这里演示：https://jsfiddle.net/IA7medd/81ggxbo3/

【参考方案2】：

引导类是：

.carousel-control.right 
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;

只需删除 bootstrap.css 中的 background-image 行

编辑：

对左控制做同样的事情

并将其设置为：

.carousel-control.right:hover 
background-color: red;
    

例如...

【讨论】：

我真的不想接触最初的 Bootstrap css。而且背景不是问题。只有当它被聚焦时（不透明度：0.9；不会因为焦点而改变）

你想设置什么不透明度？

在你的 CSS 中添加这个： .carousel-control:focus opacity: 0.5 !important;