在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/

希望對您有所幫助。