Question

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

感谢您的帮助。

Answer 1

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

我只是尝试了没有它的代码，它工作正常：（工作代码）

$(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")
  })

})

Answer 2

如果你使用jquery试试..

$(function(){
    $('#comingSoon').hover(function(){
        /*do something when moseover*/
    },
    function(){
        /*do something when mouse-left*/
    });
});

jQuery - 当悬停在一个元素上时，努力改变整个网页的背景

2 个答案: