Question

我正在按照教程设计一个简单的滑块，我决定混合一些东西，我遇到了麻烦。滑块教程应该使用translate来左右滑动图像，但是我想使用不透明度值和堆栈图像的变化，所以我不需要使用translate并且可能使用过渡来平滑不透明度的效果更改。我用div完成了以下操作，但是我在使用相同的图像处理时遇到了麻烦。这是我迄今为止所取得的成就：http://jsfiddle.net/6nLx5/1/。转换应该在您单击图像1，图像2，图像3和图像4文本时发生。以下是所选图像的css

img_selected{
    z-index:+11;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    -o-transition: opacity 12s ease;
    transition: opacity 2s ease;
}

以下代码适用于滑块内未选择的图像。

.slider-photos img {
    position: absolute;
    width: 1000px;
    height: 500px;
    padding: 0;
    margin: 0;
    -webkit-opacity: 0.0;
    -moz-opacity: 0.0;
    opacity: 0.0;
    z-index:+10;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}

图像处于不透明度0，因为使用jquery进行类激活应该使它们可见，此时类被切换。希望我很清楚。

Answer 1

这是一个特定的问题。 img_selected的特异性低于.slider-photos img，因此后者的不透明度是“胜利者”。

您可以解决在所选属性中添加重要内容的问题：

.img_selected {
    z-index:+11;
    opacity: 1 !important;

我知道，这是解决它的一种不受欢迎的方式，但它更快更容易。更可接受的方式是设置更具体的选择器，如

.slider-photos img.img_selected {
    opacity: 1;

使用滑块中的css类更改img opacity

1 个答案:

updated fiddle