悬停在图像上时有白色闪烁

Question

当我将鼠标悬停在某些列上时，我按照教程更改了背景元素或列图像。这是我想出的功能代码（“网站”将是我的网站网址），但每次似乎加载所有内容时都会出现白色闪烁......有什么解决办法吗？ 谢谢

document.addEventListener('DOMContentLoaded', function() {
  jQuery(function($) {
    $('.littletravA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0004_MENU_IMG_LTR_001.jpg)');
    });
    $('.littletravA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
    $('.bestA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0005_MENU_IMG_BB_001.jpg)');
    });
    $('.bestA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
    $('.audreyA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0000_MENU_IMG_AS_001.jpg)');
    });
    $('.audreyA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
    $('.MLA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0003_MENU_IMG_ML_001.jpg)');
    });
    $('.MLA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
    $('.stribeA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0001_MENU_IMG_STRIBE_001.jpg)');
    });
    $('.stribeA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
    $('.aztecA').mouseenter(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0002_MENU_IMG_PYI_001.jpg)');
    });
    $('.aztecA').mouseleave(function() {
      $('#defaultB').css('background-image', 'url(website/wp-content/uploads/2021/11/0006_MENU_IMG_DEFAULT_001.jpg)');
    });
  });
});

#defaultB {
  background: #000000 transition: background 0.2s linear;
}

Answer 1

除了缩小图片

您是否也可以使用 DRY 代码 - 类似这种未经测试的代码

注意我给了鼠标悬停的目标一个 ID

const folder = 'https://via.placeholder.com/300x300?text='; // 'website/wp-content/uploads';
const def = '/2021/11/0006_MENU_IMG_DEFAULT_001.jpg';
const $defaultB = $("#defaultB");
const images = {
  "littletravA": "/2021/11/0004_MENU_IMG_LTR_001.jpg",
  "bestA": "/2021/11/0005_MENU_IMG_BB_001.jpg",
  "audreyA": "/2021/11/0000_MENU_IMG_AS_001.jpg",
  "MLA": "/2021/11/0003_MENU_IMG_ML_001.jpg",
  "stribeA": "/2021/11/0001_MENU_IMG_STRIBE_001.jpg",
  "aztecA": "/2021/11/0002_MENU_IMG_PYI_001.jpg"
}

$(function() {
  $(".upload").on({
    mouseenter: function() { 
      $("#defaultB").css("background-image", `url(${folder + images[this.id]})`);
    },
    mouseleave: function() {
      $defaultB.css("background-image", `url(${folder + def})`);
    }
  });
});

document.getElementById("thumbs").innerHTML = Object
  .entries(images).map(([key, src]) => `<img class="upload" id="${key}" src="${folder+src}" />`)
  .join('')

#defaultB {
  border: 1px solid black;
  height: 300px;
  width: 300px;
  background-image : url(https://via.placeholder.com/300x300?text=/2021/11/0006_MENU_IMG_DEFAULT_001.jpg);
}

#thumbs img {
  height: 50px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="defaultB">Hello</div>
<div id="thumbs"></div>