javascript - 在任何元素悬停时更改页面背景(不是元素 BG)。

Question

每当我将鼠标悬停在某个元素上时，我都会尝试更改页面背景。目前我已经将不同的图像上传到我的网络服务器中，当我将鼠标悬停在 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 为悬停的 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>