javascript - jQuery - 将鼠标悬停在一个元素上时努力改变整个网页的背景

Question

我是 javascript 和 jQuery 的新手。我正在尝试使我的整个网页(class = .background-image)的背景在悬停在特定元素上时发生变化。我无法让它工作。当我将鼠标悬停在元素 (id = #ComingSoon) 上时，似乎什么也没有发生。浏览器控制台目前没有错误。有人可以告诉我什么可能是错的。我已经为此工作了几个小时，现在进行了一系列小改动但没有成功。我已经搜索过其他有类似问题的人但没有成功。以下是我的 HTML 和 Javascript 的一些摘录: HTML JAVASCRIPT

感谢您的帮助。

Answer 1

我很确定您的问题是 url() 之后的 size(cover)。

我只是尝试了没有它的代码，它工作正常:(工作代码)

$(document).ready(function(){
'use strict';
  $("#ComingSoon").mouseenter(function(){
    $(".background-image").css("background-image", "url(http://www.realpropertymanagementcolorado.com/wp-content/uploads/2013/12/denver-skyline.jpg)");
    $(".background-image").css("background-size", "cover");

    console.log("entered H2")
   })

   $("#ComingSoon").mouseleave(function(){
    $(".background-image").css("background", "none");

    console.log("Left H2")
  })

})

当我用您拥有的 size(cover) 再次编写它时，它会中断:(损坏的代码)

$(document).ready(function(){
'use strict';
  $("#ComingSoon").mouseenter(function(){
    $(".background-image").css("background-image", "url(http://www.realpropertymanagementcolorado.com/wp-content/uploads/2013/12/denver-skyline.jpg) size(cover)");
    $(".background-image").css("background-size", "cover");

    console.log("entered H2")
   })

   $("#ComingSoon").mouseleave(function(){
    $(".background-image").css("background", "none");

    console.log("Left H2")
  })

})