在任何元素悬停时更改 PAGE 背景（不是元素 BG）。

Question

每当我将鼠标悬停在某个元素上时，我都会尝试更改我的 PAGE 背景。目前我已经将不同的图像上传到我的网络服务器中，当我将鼠标悬停在 div 上时，我想将我的页面背景从其中一个图像更改为另一个图像。我该怎么做呢？不管是javascript、jquery还是css，答案越多越好，这样我就可以学习一种新的方法:)

我的css：

body{
background: url(../html/dest/back2.png);  
height: 100% ; 
background-attachment:   fixed;
} 

我上传了一张名为 back2a.png 的新图片。每当用户将鼠标悬停在元素上时，我想加载此图像来代替我以前的图像 (back2.png)。 （任何元素） 注意：我还想保持 background-attachment:fixed 在新图像上。 新图像只是在 Photoshop 中完成的色相/饱和度变化，没什么大不了的，它是相同的大小和一切。

这是我尝试执行此操作的页面。 http://hourtimeagent.com/html/c++.php 我很感激答案！谢谢！

Answer 1

jQuery:

$("div").hover(function() {
   $("body").css("background", "url(../html/dest/back2a.png)");
});

如果你想在之后改回来，你可以使用 jQuery .blur 方法：

$("div").blur(function() {
   $("body").css("background", "url(../html/dest/back2.png)");
});

可以将 div 选择器更改为您希望它在悬停时显示的任何内容。例如，如果您有一个 id 为 hover 的 div，请使用以下内容：

$("div#hover").hover(function() {
   $("body").css("background", "url(../html/dest/back2a.png)");
});

或者一个悬停类：

$("div.hover").hover(function() {
   $("body").css("background", "url(../html/dest/back2a.png)");
});

Javascript

要直接使用 javascript，您必须向页面上要更改背景的元素添加事件。我会坚持使用 jQuery，因为它为你做的，但如果你更喜欢在 div 上只使用 javascript，你会添加：

<div onhover="myFunc();"></div>

然后 javascript 将如下所示：

<script type="text/javascript>
function myFunc() {
   document.body.style.background = "url(../html/dest/back2a.png)";
</script>