貓頭鷹輪播圖片不應用CSS

Question

我有一個圖像輪播，我想對它們進行click事件，因此我將它們設置為：

<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標簽，那是因為我想讓用戶知道它的選擇，但它不能正常工作！它添加類的img元素，但它不顯示任何過濾器。

如果有人有更好的方法，我會全力以赴。

Answer 1

CSS fliter與瀏覽器相關。因此您可以嘗試

.selected-option {
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
     filter: gray; /* IE6-9 */
     -webkit-filter: grayscale(1); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

針對不同的瀏覽器

資源