Question

我是网页设计的新手，我现在正在努力创建我网站的一部分，我需要以某种方式实现这一目标：

当 BODY BACKGROUND 的 PART 为HOVERED时，将背景更改为“B”，当鼠标未超过该部分时，我需要更改回到背景“A”。

我在这里看到了一些例子，但由于我是初学者，我不知道如何使用javascript，如果你能在这里给我一些启示，无论是纯CSS还是如何应用javascript。

Answer 1

使用名为JQuery http://jquery.com的第三方javascript库非常容易实现，您可以在此处看到一个有效的示例：http://jsfiddle.net/bbp8G/

$(document).ready(function(){
    $("#hover").mouseenter(function(){
        $(this).css("background","#009900");
    }).mouseleave(function(){
        $(this).css("background","#ffffff"); 
    }); 
});

Answer 2

这是我知道如何做你所描述的最简单的方法......

<!-- POSITION THIS DIV WHEREVER YOU WANT THE 
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>

<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
  #hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
  .myNewBackround { background-color: red; }
</style>
<script>
  $(document).ready(function() {
    // when the #hover DIV is hovered, change the background of the body
    $('#hover').hover(function() {
      $('body').addClass('myNewBackground');
    });
  });
 </script>

这是一个JS FIDDLE：

http://jsfiddle.net/ZKaJn/

Answer 3

或者您可以使用纯CSS

来完成

<div id="left">&nbsp;</div>

<div id="right">&nbsp;</div>

CSS部分：

#left
{
    background-color:#000;
    float:left;
    width:50%;
    height:200px;
}
#right
{
    background-color:#FF0;
    float:right;
    width:50%;
    height:200px;
}

#right:hover
{
    background-color:#00F;    
}

#left:hover
{
    background-color:#F00;    
}

你可以用你喜欢的任何东西替换div和值，主要部分是＃right：hover和#left：hover

Answer 4

实际上只有css，当悬停DOM元素时，无法更改 body 的背景。这是因为CSS不允许您（尚未）向上移动DOM树（选择父级），仅向下移动（选择子级）。

话虽如此，但是可以模仿这种效果，如果它是你想要改变的身体背景，它甚至可以很容易。您可以在身体背景的顶部和实际内容下面放置一个背景为伪元素的伪元素。这样看起来身体背景就好了。

实现这一目标的css看起来像这样：

.hover-me:hover:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background: url(http://placekitten.com/600/300) center center;
    background-size: cover;
    z-index: -1;
}

一个小小的小提琴演示：http://jsfiddle.net/3dwzt/

应与IE8兼容

当其中一部分悬停时更改背景

4 个答案: