1

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

对于悬停效果，我会使用 JQuery 的悬停功能，但我找不到任何方法来实现柔和的过渡效果。

4

4 回答 4

3

您可以仅使用相对缓动的 CSS 来执行此操作，并使用具有绝对定位的 div 以不显眼地充当主体。

演示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;
}

你可以在这里找到更多信息

已编辑- jQuery 版本也

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

演示http://jsfiddle.net/kevinPHPkevin/Hc7UW/5/

$('a').hover(function(){
      $('body').css('background', this.id);
}, function(){
      $('body').css('background', '#ccc');
});
于 2013-08-30T19:26:22.447 回答
0

这个答案非常面向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]);
    });
});
于 2013-08-30T19:56:41.940 回答
0

使用 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;
}
于 2013-08-30T19:20:14.997 回答
0

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

于 2013-08-30T19:11:00.757 回答