在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，您不需要Java脚本即可对图像进行颜色叠加，我认为它也可以提高性能。

以下是包含有关色彩覆盖的完整演示和源代码的资源： http : //tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

希望对您有所帮助。