0

我正在按照教程设计一个简单的滑块，我决定混合一些东西，但遇到了麻烦。滑块教程应该使用翻译来左右滑动图像，但我想使用不透明度值和堆栈图像的变化，所以我不需要使用翻译，也许使用过渡来平滑不透明度处的效果改变。我使用 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 的类激活应该使它们可见，此时类被切换。希望我很清楚。

4

1 回答 1

0

这是一个特殊性的问题。img_selected 的特异性低于 .slider-photos img 所以后者的不透明度是“赢家”。

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

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

我知道，这是一种不流行的解决方法，但它更快更容易。更被接受的方法是设置一个更具体的选择器，如

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

更新的小提琴

于 2013-03-10T22:14:18.170 回答