當其中一部分懸停時更改背景

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元素時，不可能改變身體的背景。 這是因為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 個解決方案

解決方案1
1 2013-07-22 20:24:35

解決方案2
1 2013-07-22 20:25:22

解決方案3
0 2013-07-22 20:28:09

解決方案4
0 2013-07-22 20:58:03

當其中一部分懸停時更改背景

問題描述

4 個解決方案

解決方案1 1 2013-07-22 20:24:35

解決方案2 1 2013-07-22 20:25:22

解決方案3 0 2013-07-22 20:28:09

解決方案4 0 2013-07-22 20:58:03

解決方案1
1 2013-07-22 20:24:35

解決方案2
1 2013-07-22 20:25:22

解決方案3
0 2013-07-22 20:28:09

解決方案4
0 2013-07-22 20:58:03