javascript - 如何格式化我的 jQuery

Question

我已经成功地使用这个很棒的论坛在悬停另一个元素时设置了背景图片!由于我是 jQuery 和 javascript 的新手，我正在努力格式化在悬停时添加额外的效果。例如我不只是想在背景图像上使用附加我还想做一个背景大小:封面；追加和过渡:所有 0.33 秒都轻松。我将如何将其添加到当前语法中？

$(document).ready(function() {

    //Preload
    $('<img/>').hide().attr('src', '../img/background-experience.jpg').load(function(){
        $('body').append($(this));
    });

    $('.btn').hover(function() {
        $('body').css('background-image', 'url("../img/background-experience.jpg")');
    }, function() {
        $('body').css('background', '');
    });
});

编辑:在 NOEL 的帮助下

使用自定义类添加，这可能是一个更好的解决方案，现在有转换问题，这是我的 scss 代码。

body {
  background: $black;
  color: $white;
  font-family: $default-font;
  font-weight: 600;
  transition: all 0.33s ease;
}

.my-custom-class {
  background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
  background-size:cover;
}

Answer 1

您可以将所有内容都放在一个 css 类中，您可以在悬停按钮时将其添加到您的正文中。这需要做两件事: (1) 定义 css 规则；然后 (2) 在悬停时添加、删除它。

下面是一个示例代码，用于显示此操作。希望这对您有所帮助!

$('.btn').hover(function() {
        $('body').addClass('my-custom-class');
    }, function() {
        $('body').removeClass('my-custom-class');
    });

.my-custom-class {
  background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
  
  background-size:cover;
}

body {
  background-image:url('https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header');
  background-size:cover;
transition: all 0.33s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">My button</button>