Q

更改與jQuery懸停的背景

2011-04-27 141 views 0 likes

0

我試圖找出一個簡單的jQuery代碼將在懸停時淡入淡出rgba背景顏色，然後在將鼠標從div移開時淡出。更改與jQuery懸停的背景

我說「rgba」的原因是因爲它需要70％不透明的黑色，但如果可以用jQuery自己的不透明度完成，那很酷。

一個完美的例子是http://dalhov.se，除了它們使用更復雜的方法，我很難學習。

感謝，韋德

2011-04-27 Wade D Ouellet

A

回答

5

你在這裏

http://jsfiddle.net/samccone/EpmKC/

你需要包括jQuery的用戶界面或獲取更多信息color plugin

退房this thread

2011-04-27 04:35:42 samccone

+0

嗯這一個，下面不工作，我已經包括了色彩插件之一：http://vls.thewestharbour.com是WIP演示現場 – 2011-04-27 04:47:53

+0

好了，事實上，我現在去，但我想知道是否有辦法讓背景不透明，而不是文字。 – 2011-04-27 04:50:44

+0

http://imgur.com/7WSEm看起來像你在JS中有一些錯誤... – samccone 2011-04-27 04:51:04

0

該死打我到衝，我會盡我所能 http://jsfiddle.net/mazzzzz/Wfech/

2011-04-27 04:41:54 Ben

+0

抱歉，:)但驚人的有多少種不同的解決方案有這樣一個簡單的問題，我發現，檢查它是否是動畫是必須的，因爲如果你真的快速滑過和關閉，你可以創建一個閃爍的效果 – samccone 2011-04-27 04:43:47

+0

哈哈，不用擔心（答案很好） – Ben 2011-04-27 04:45:01

1

編輯：所有你需要的是jQuery的fadeTo功能...

演示：http://jsfiddle.net/wdm954/5Hef6/5/

我相信這是最相似的例子網址。

$('#bg').fadeTo(1, 0); 
$('#content').hover(function() { 
    $('#bg').stop().fadeTo(300, 0.7); 
}, function() { 
    $('#bg').stop().fadeTo(300, 0); 
});

在這個演示中，DIV是分層的。如果您放棄包含內容的DIV的不透明度，則不透明度也會影響內容。

2011-04-27 04:44:32 wdm

+0

當頁面第一次加載時，有一個奇怪的小bug ...背景閃爍然後消失。 – Hristo 2011-04-27 04:50:04

+0

稍微修改了代碼。現在，背景顏色最初由CSS隱藏。 – wdm 2011-04-27 05:02:19

+0

幹得好！我喜歡它:) – Hristo 2011-04-27 05:03:32

0

我認爲你使用下面的代碼沒有JQuery。

In style 

#divDemo{background-color:#FF0000;height:50px;width:200px;} 
#divDemo:hover{background-color:#DDDDDD;height:50px;width:200px;} 

In HTML 

<div id="divDemo"></div>

2011-04-27 04:47:53

+0

用戶希望使用jQuery – Hristo 2011-04-27 04:49:14

相關問題