如何在懸停時輕鬆更改div背景？

我正在尋找一種方式來改變頁面正文的背景，當用戶在頁面上懸停了一個特定的鏈接時（我打算根據鏈接懸停來改變背景爲不同的顏色），但我是打算使這種效果輕柔起作用，就像在CSS中的轉換效果一樣。有什麼辦法可以做到嗎？使用JS甚至CSS？如何在懸停時輕鬆更改div背景？

對於懸停效果，我會使用JQuery的懸停功能，但我找不到任何方式輕鬆過渡的東西。

來源

2013-08-30 Yasser Lima

我剛剛更新了我的答案/小提琴 – Vector

http://jsfiddle.net/y5yBg/2/embedded/result/ –

只能與相對寬鬆和使用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

EDITED - jQuery的版本也

選擇父母的方式，即體你會需要使用jQuery。它可以很容易申請。我會這樣做的方式，所以然後我不必創建很多類等，通過aid這是名稱的顏色。然後我會用它作爲顏色的標識符。

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

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

來源

2013-08-30 19:26:22 Vector

好戲。順便說一下，'position：fixed'不會是更好的選擇嗎？ http://jsfiddle.net/Hc7UW/4/ – biziclop

你應該發佈的HTML和評論，這個工作的a元素必須是身體前面的兄弟姐妹。不知道如何工作的人可能很難確定爲什麼它不適合他們。反正好戲！ – vals

謝謝，我會去爲這個選項，但只有一個問題：有沒有什麼辦法** **和**工作** **身體的div內？ –

您應該能夠修改this question中的答案以滿足您的需求。您可以將$(this)替換爲您想要使用的實際選擇器（推測$('body')）。請記住，您需要在常規jQuery庫頂部添加一個庫（jQuery UI或jQuery顏色插件）。

來源

2013-08-30 19:11:00 Alex

或代替jQuery UI，可以使用jQuery Color插件：https：// github。com/jquery/jquery-color – biziclop

@biziclop我想我也應該提到這一點。我編輯了我的答案以包含它。 – Alex

解決方案使用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-30 19:20:14 biziclop

不需要真/假開關，因爲mouseover和mouseout只在每次轉換時觸發一次。 '（'mouseover mouseout'，function（）{$ b.toggleClass（'red'）;}）;' –

這個答案是很多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-30 19:56:41

如何在懸停時輕鬆更改div背景？

回答

相關問題