在滑块中使用 css 类更改图像不透明度答案

【问题标题】：Changing img opacity with the use of css class in slider在滑块中使用 css 类更改图像不透明度
【发布时间】：2013-03-09 06:34:06
【问题描述】：

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

【问题讨论】：

标签： jquery html css slider image

【解决方案1】：

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

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

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

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

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

updated fiddle

【讨论】：

非常感谢，这让我疯狂了好几天。提供了两个可行的答案:) 谢谢。