css 显示内容时更改图像颜色

xxe27gdn  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(152)

我正在工作的一节,我需要给颜色的图像时,揭示的内容。
下面是代码的一个例子:

jQuery(function($){
    var revealButtons = {
        '.rv_button_1-do': '.rv_element_1-do'
    
 
    };
    $.each(revealButtons, function(revealButton, revealElement) {
        $(revealButton).click(function(e){
            e.preventDefault();
            $(revealElement).slideToggle();
            $(revealButton).toggleClass('rotateicon img-color');
        });
    });
});
body:not(.et-fb) .rv_element-do { display: none; }
.img-color {
filter: grayscale(100%);
}
.rv_button_1-do{
background-color: blue; 
padding: 12px 20px; 
color: white;
width: 200px;
text-align: center; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img decoding="async" loading="lazy" src="https://media.npr.org/assets/img/2017/01/18/red-turtle_wide-03029731def2957b2fb69fb27e44c5c2e456f4a6-s800-c85.webp" width="80" height="165" alt="" class="img-color">
<p>Example text</p>
<div class="rv_element-do rv_element_1-do">                                         
    <p>Helps to fund ten (10) Estuary pop-up outreach events, or one (1) water-quality testing location kit for an entire year, or a day of seagrass monitoring in the field. Included with this donation:</p></div>
 
 <div class="rv_button_1-do"><a>button reveal</a></div>

我试图在打开内容的那一刻添加一个类,并删除添加的过滤器,但一直没有成功。

xoshrz7s

xoshrz7s1#

您不必删除.img-color类,而只需分配一个新的类来覆盖滤镜:

.img-revealed {
    filter: grayscale(0%) !important;
}

只需将'img-revealed'赋值给回调中的图像,如下所示:

$(revealButton).click(function(e){
    e.preventDefault();
    $(revealElement).slideToggle();
    $(revealButton).toggleClass('rotateicon img-color');
    $('img').toggleClass('img-revealed');
});

相关问题