0

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

当部分身体背景悬停时，将背景更改为“B”，当鼠标不在该部分上方时，我需要将其更改回背景“A”。

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

4

4 回答 4

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"); 
    }); 
});
于 2013-07-22T20:24:35.477 回答
1

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

<!-- 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 小提琴：

http://jsfiddle.net/ZKaJn/

于 2013-07-22T20:25:22.520 回答
0

或者你可以用纯 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

于 2013-07-22T20:28:09.157 回答
0

实际上，仅使用 css 就不可能在悬停 DOM 元素时更改主体的背景。这是因为 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及以上

于 2013-07-22T20:58:03.213 回答