Twitter Bootstrap透明按钮

Question

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

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

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

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

调整叠加层也会影响按钮的不透明度（在我的styles.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;
    }

Answer 1

使用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/