css class/property 在 jQuery 中应用 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

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

您应该使用蒙版对图像进行颜色叠加。类似于：

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/

希望对您有所帮助。

css class/property 在 jQuery 中应用 css 方法后无效

css class/property inactive after applying css method in jQuery

javascript

css

jquery

background

hover