在 jQuery 中应用 css 方法后 css 类/属性无效

Question

我有一个类似于卡片的 html 对象。这是我的代码：

<a class="card" href="/subjects/electronics.html" >
    <div class="card_img" id="img_electronics"></div>
    <h4>Electronics</h4>
    <p class="card_description">Description</p>
    <div class="line"></div>
    <h5>GET STARTED</h5>
</a>

还有我的 CSS：

.card_img{
    width: 350px;
    height: 200px;
    background-size: 350px 200px;
}

#img_electronics{
    background-image: url(/images/electronics.jpg);
}

我在 css 中指定图像来源的原因是因为我想使用悬停效果在图像上创建颜色叠加。我有很多不同图片来源的卡片，所以我用JS来做效果：

$(document).ready( function() {
    $('.card').hover( 
        function(){
            pic = $(this).find("[id^='img_']");
            read_img_url = pic.css("background-image");
            val_img_url = read_img_url.replace(/["']/g, "");

            $(pic).css("background", "linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), " + val_img_url);
            $(this).toggleClass('card_hover');
            $(this).find('h5').toggleClass('h5_hover');
        },

        function(){
            $(pic).removeProp("background");
            $(pic).css("background-image", val_img_url);
            $(pic).addClass('card_img');
            $(this).toggleClass('card_hover');
            $(this).find('h5').toggleClass('h5_hover');
        });

    });

一开始，每张图片都会正确显示。但是，第一次悬停后，页面上的图像大小保持不变，但只有一小部分实际图像存在。不过，悬停时的颜色叠加效果很好。

我尝试设置background: linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0)), url(/images/electronics.jpg); 而不是背景图像，但 jQuery 将该属性读取为空字符串。任何建议如何在悬停后保留我的整个图像？

Answer 1

我认为您当前的方法有问题，因为您同时使用渐变和图像来“背景”属性。

您应该使用蒙版来执行图像的颜色叠加。比如：

CSS：

.view {
        width: 350px;
        height: 200px;
        float: left;
        border: 10px solid #fff;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

    .mask {
        width: 350px;
        height: 200px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background: linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 0.3));
    }
    .view:hover .mask { 
        opacity: 1;
    }
    .view img {
        display: block;
        position: relative
    }

HTML：

<a class="card" href="/subjects/electronics.html" >
    <div class="view">
        <img src="/images/electronics.jpg" />  
        <div class="mask">
        <h4>Electronics</h4>
        <p class="card_description">Description</p>
        <div class="line"></div>
        <h5>GET STARTED</h5>
    </div>
</a>

这种方法只使用 CSS，你不需要 Javascript 来对图像执行颜色叠加，我认为它也可以提高你的性能。

这是一个资源，包含有关颜色叠加的完整演示和源代码：http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

希望对你有所帮助。