Question

我正在尝试调整此tutorial from Muno Space以将缩略图img背景显示为默认状态，并在悬停时显示颜色背景。

我无法弄清楚要改变哪个部分的javascript，请帮忙！我已经尝试了所有我能想到的东西，但我对JS的理解非常简陋。对于真正了解JS的人来说，答案可能是显而易见的。

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

Squarespace博客摘要缩略图

1 个答案: