owl 轮播图片未应用 css

Question

我有一个图片轮播，我想对它们进行点击事件，所以我这样设置它们：

<div id="comidas" class="owl-carousel owl-theme">
    <a class="item opcion" >
        <img class="img" src = "my/path/to/image.jpg" alt = "Image Name" >
    </a >
    <a class="item opcion" >
        <img class="img" src = "my/path/to/image.jpg" alt = "Image Name" >
    </a >
</div>

我得到了这个脚本：

$(document).ready(function() {

        $("#comidas").owlCarousel({
            items : 10
        });

        $('.opcion').on('click', function(event){
            var $this = $(this);
            if($this.hasClass('clicked')){
                $this.removeAttr('style').removeClass('clicked');
                $this.children('img').removeClass('selected-option');
            } else{
                $this.addClass('clicked');
                $this.children('img').addClass('selected-option');
            }
        });

    });

这里是 css:

#comidas .item{
    display: block;
    cursor: default;
    margin: 3px;
}
#comidas .item:hover{
    background: rgba(242, 130, 13, 0.27);
}

.selected-option {
    filter: grayscale(1);
}

所以，我想要的是对 a 标签内的图像应用灰度滤镜，那是因为我想让用户知道它已被选中，但它不起作用！，它将 class 添加到 img 元素，但不显示任何过滤器。

如果有人有更好的方法，我洗耳恭听。

Answer 1

CSS fliter 取决于浏览器.. 所以你可以试试

.selected-option {
     filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
     filter: gray; /* IE6-9 */
     -webkit-filter: grayscale(1); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

针对不同的浏览器..

SOURCE

owl 轮播图片未应用 css

owl carousel image not applying css

html

javascript

css

jquery

owl-carousel