Squarespace博客摘要縮略圖

Question

我試圖修改此tutorial from Muno Space以將縮略圖img背景顯示爲默認狀態，並且在懸停時顯示顏色背景。

我想不通哪個部分的javascript改成這樣做，請大家幫忙！我嘗試過所有我能想到的東西，但我對JS的理解是非常基本的。對於任何真正瞭解JS的人來說，答案可能非常明顯。

Here is my live build，這裏是有問題的腳本：

<script type="text/javascript"> 
    $.fn.preload = function() { 
    this.each(function(){ 
     $("<img/>")[0].src = this; 
    }); 
    }; 
    $(document).ready(function() { 
    var imageArray = $('.sqs-block-summary-v2 .summary-item').map(function() { 
     return $(this).find('.summary-thumbnail-container img').data('src'); 
    }); 
    $(imageArray).preload(); 
    $('.sqs-block-summary-v2 .summary-item').hover(function() { 
     var image = $(this).find('.summary-thumbnail-container img').data('src'); 
     $(this).css({ 
     'background-image': 'url(' + image + ')' 
     }); 
    }, function() { 
     $(this).css({ 
     'background-image': 'none' 
     }); 
    }); 
    $('.sqs-block-summary-v2 .summary-item').click(function() { 
     window.location.replace($(this).find('.summary-read-more-link').attr('href')); 
    }); 
    }); 

這裏是相關的CSS：

.sqs-block-summary-v2 .summary-item { 
 
    border: 0px solid #d0d5d8; 
 
    background: #F2F1EE; 
 
    padding: 2em 2em; 
 
    height: 18em; 
 
    cursor: pointer; 
 
    background-size: cover; 
 
transition: background .05s ease-in-out; 
 
    } 
 
    .sqs-block-summary-v2 .summary-thumbnail-container { 
 
    display: none; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover { 
 
    background-color: rgba(193, 165, 132, 0.5); 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover:before { 
 
    content: ' '; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #101010; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0.4; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-content, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-metadata-item, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-title a, 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { 
 
    color: white; 
 
    opacity: 1; 
 
    } 
 
    .sqs-block-summary-v2 .summary-item:hover .summary-read-more-link:after { 
 
    border-bottom-color: white; 
 
    } 
 
    .sqs-block-summary-v2 .summary-content { /* date */ 
 
    text-align: left; 
 
    height: 100%; 
 
    position: relative; 
 
    } 
 
    .sqs-block-summary-v2 .summary-metadata-item { /* date */ 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: ; 
 
    font-family: "Belleza"; 
 
    color: #545048; 
 
    } 
 
.sqs-block-summary-v2 .summary-title a, .sqs-block-summary-v2 .summary-heading a, .sqs-block-summary-v2 .summary-title a:link, .sqs-block-summary-v2 .summary-heading a:link, .sqs-block-summary-v2 .summary-title a:visited, .sqs-block-summary-v2 .summary-heading a:visited { /* title */ 
 
    color: #545048; 
 
} 
 
    .sqs-block-summary-v2 .summary-title { /* title */ 
 
    font-size: 24px; 
 
    font-family: "PT serif"; 
 
    } 
 
    .sqs-block-summary-v2 .summary-read-more-link:after { 
 
    content: 'Read More'; 
 
    font-weight: 400; 
 
    color: #918B7C; 
 
    font-size: 15px; 
 
    border-bottom: solid 1px #8a959e; 
 
    letter-spacing: 1px; 
 
    padding-bottom: 2px; 
 
    font-family: "PT serif"; 
 
    } 
 
.sqs-block-summary-v2 .summary-read-more-link::after { 
 
    border-bottom: 1px solid #DCD8CF; 
 
} 
 
    .sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link { 
 
    position: absolute; 
 
    bottom: 0; 
 
    }

Answer 1

這應該扭轉懸停模式。您還需要對其進行更改，以便最初顯示img背景。

<script type="text/javascript"> 
     $.fn.preload = function() { 
     this.each(function(){ 
      $("<img/>")[0].src = this; 
     }); 
     }; 
     $(document).ready(function() { 
     var imageArray = $('.sqs-block-summary-v2 .summary-item').map(function() { 
      return $(this).find('.summary-thumbnail-container img').data('src'); 
     }); 
     $(imageArray).preload(); 
     $('.sqs-block-summary-v2 .summary-item').hover(
      function() { 
      $(this).css({ 
      'background-image': 'none' 
      }); 
     }, 
      function() { 
      var image = $(this).find('.summary-thumbnail-container img').data('src'); 
      $(this).css({ 
      'background-image': 'url(' + image + ')' 
      }); 
     }); 
     $('.sqs-block-summary-v2 .summary-item').click(function() { 
      window.location.replace($(this).find('.summary-read-more-link').attr('href')); 
     }); 
     });