css - Twitter Bootstrap 透明按钮

我在悬停上有一个图像叠加，它也有一个按钮。

我的问题是该按钮在悬停时也变得透明，并且不希望出现这种情况。

这是当前发生的事情的 JSFiddle:http://jsfiddle.net/XgGFf/37/

理想情况下，这就是我希望它的样子:

调整覆盖类也会影响按钮的不透明度(在我的 style.css:688 中):

    .ca-item-main figcaption {
        height: 100%;
        width: 100%;
        opacity: 0;
        text-align: center;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }

最佳答案

当您使用 opacity 时，您会更改所有元素和内部元素的值。您可能希望像这样管理背景的 rgba 值:

.figTop {
  display:inline-block;
}
.no-touch .ca-item-main figure:hover figcaption, .ca-item-main figure.cs-hover figcaption   {
  opacity:1;
}
.ca-item-main figcaption {
  background: rgba(39, 48, 66, 0.6);
}

演示 http://jsfiddle.net/XgGFf/42/

关于css - Twitter Bootstrap 透明按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20751181/