更改任何元素悬停时的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）。 （任何元素） 注意：我还想保留背景附件：修复新图像。 新的图像只是改变了在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>