javascript - 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'));
        });
      });