Question

我正在使用bx滑块（http://bxslider.com/），并根据我的需要进行了自定义。我将缩略图设为50％不透明度，然后悬停时为100％不透明度。

我现在要做的是使“活动”缩略图100％不透明。该插件为活动缩略图添加了一个名为“active”的类，但是当我尝试在css中添加一行以将“.active”的不透明度更改为100％时，它不起作用。为什么呢？

测试网站：http://patrickmauldin.com/testingserver/kerri/

自定义jquery：

$(document).ready(function(){
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager',
    mode: 'fade',
    controls: false,
    auto: true
  });
});

有什么想法吗？

谢谢！

Answer 1

不透明度被覆盖：

#bx-pager a
{
    margin-right: 17px;
    opacity: 0.5;
}

因为它比.active { opacity: 1; }更具体。解决此问题的一种方法是像这样添加!important：

.active
{
    opacity: 1 !important;
}

如果由于某种原因你不想使用!important，你也可以增加特异性：

#bx-pager .active
{
    opacity: 1;
}

Answer 2

尝试更改此代码：（.active a至#bx-pager a.active）

.active a{ opacity: 1 }

到

#bx-pager a.active {
    opacity: 1 !important;
}

bxSlider - 活动缩略图不透明度

2 个答案: