Question

当用户在页面上悬停特定链接时，我正在寻找一种更改页面正文背景的方法（我打算根据悬停的链接将背景更改为不同的颜色），但是我打算让这个效果轻柔地起作用，就像CSS中的过渡效果一样。有什么办法吗？使用JS甚至CSS？

对于悬停效果，我会使用JQuery的悬停功能，但我无法找到任何方式进行轻微过渡。

Answer 1

你只能用相对宽松的CSS来做这个，并使用一个绝对定位的div来不引人注意地扮演身体。

DEMO http://jsfiddle.net/kevinPHPkevin/Hc7UW/3/

 #body {
    background: #ccc;
    position: absolute;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
a.one:hover ~ #body {
    background: blue;
}
a.two:hover ~ #body {
    background: red;
}
a.three:hover ~ #body {
    background: yellow;
}

您可以找到更多信息here

已编辑 - jQuery版

选择父级的方式，即 body ，您需要使用jQuery。它可以很容易申请。我会这样做的，所以我不必创建很多类等，通过给a id这个名称颜色。然后我会用它作为颜色的标识符。

DEMO http://jsfiddle.net/kevinPHPkevin/Hc7UW/5/

$('a').hover(function(){
      $('body').css('background', this.id);
}, function(){
      $('body').css('background', '#ccc');
});

Answer 2

您应该能够调整this question中找到的答案以满足您的需求。您可以将$(this)替换为您要使用的实际选择器（大概是$('body')）。请记住，您需要在常规jQuery库之上添加一个额外的库（jQuery UI或jQuery颜色插件）。

Answer 3

使用jQuery + CSS3过渡的解决方案：

http://jsfiddle.net/r3wCE/

jQuery的：

$b = $('body');
$('a').mouseover(function(){  $b.toggleClass('red', true  );  })
      .mouseout( function(){  $b.toggleClass('red', false );  });

CSS：

body {
    -webkit-transition: background-color 2s;
       -moz-transition: background-color 2s;
         -o-transition: background-color 2s;
            transition: background-color 2s;
    background-color: white;
}
body.red {
    background-color: red;
}

Answer 4

这个答案非常适合jquery。这意味着你不必在css中做很多事。

因此，您可以执行生成不同颜色的内容并立即附加它们，而无需重新配置css样式表。

演示： http://jsfiddle.net/y5yBg/2/

代码

bg=$(document.body);
color=['orange','rgb(42, 212, 255)','rgb(219, 255, 74)'];

$('li').each(function(e){
    $(this).click(function(){
    bg.css('background-color',color[e]);
    });
});

如何在悬停时轻轻改变div背景？

4 个答案: