0

I'm trying to figure what a simple jQuery code is to fade in an rgba background colour on hover and then fade out when you move your mouse off the div.

The reason I say "rgba" is because it needs to be 70% opaque black but if that can be done with jQuery's own opacity, then that's cool.

A perfect example is http://dalhov.se except they use a more complicated method that I'm having a hard time studying.

Thanks, Wade

Wade D Ouellet
  • 681
  • 3
  • 21
  • 36

4 Answers4

5

here you are

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

you need to include jquery UI or the color plugin

Check out this thread for more info

Community
  • 1
  • 1
samccone
  • 10,746
  • 7
  • 43
  • 50
  • Hmm this one and the one below aren't working, I've included the colour plugin: http://vls.thewestharbour.com is the WIP demo site – Wade D Ouellet Apr 27 '11 at 04:47
  • Okay, I actually got it going now but I'm wondering if there's a way to just have the background opaque and not the text as well. – Wade D Ouellet Apr 27 '11 at 04:50
  • @Wade... on which elements on that page do you want this effect? – Hristo Apr 27 '11 at 04:51
  • just the #content background colour, nothing inside the div (just the div itself). I want there to be no background then fade into a 70% black background on hover then fade back out to no background when the mouse is off. – Wade D Ouellet Apr 27 '11 at 04:52
  • Should I layer two separate divs (one for the background and one for the content) or is there a cleaner jquery fix? Edit: actually that won't work because it will still fade the div inside the other div (and I can't absolute position both because the heights vary with each page) – Wade D Ouellet Apr 27 '11 at 04:57
  • I don't think the height 100% is working because there's nod efined height for the parent div, I updated my demo site. – Wade D Ouellet Apr 27 '11 at 05:06
  • Yeah I can't absolute position the content because the div height still needs to be dynamic (a requirement by the client) – Wade D Ouellet Apr 27 '11 at 05:09
  • ok here check the example now you just update the height using the jquery .height() function – samccone Apr 27 '11 at 05:13
  • SO close (thanks for your help so far by the way). The only problem is that I can't absolute position the span around the text because then the divs still lose their height. If you look right now it works but it's below the text content (without the absolute positioning) – Wade D Ouellet Apr 27 '11 at 05:22
  • Using firebug, it looks like it's all formatted properly but the hover won't work now and the text isn't selectable. Maybe something is up with the z-indexes? – Wade D Ouellet Apr 27 '11 at 05:53
  • Okay there we go! Just need to adjust the padding now. Thanks a ton. – Wade D Ouellet Apr 27 '11 at 05:59
  • 1 quick thing, I notice it flickers on the first time you hover over it - is there a way to eliminate this with a preload or something? – Wade D Ouellet Apr 27 '11 at 06:28
  • Also, I just noticed in Safari it doesn't hover, any ideas? – Wade D Ouellet Apr 27 '11 at 06:37
1

EDIT: All you need is jQuery's fadeTo function...

Demo: http://jsfiddle.net/wdm954/5Hef6/5/

I believe this is most similar to your example url.

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

In this demo the DIVs are layered. If you drop the opacity of a DIV that contains content your opacity will effect the content also.

wdm
  • 7,121
  • 1
  • 27
  • 29
  • when the page first loads, there is a weird little bug... the background flashes and then disappears. – Hristo Apr 27 '11 at 04:50
  • Modded the code slightly. Now the background color is initially hidden by the css. – wdm Apr 27 '11 at 05:02
0

Darn beat me to the punch, I'll throw mine up anyway though http://jsfiddle.net/mazzzzz/Wfech/

Jess
  • 8,628
  • 6
  • 49
  • 67
  • sorry about that :) but amazing how many different solutions there are for such a simple issue, I find that checking to see if it is animated is a must tho because you can create a flickering effect if you mouse over and off really quick – samccone Apr 27 '11 at 04:43
0

I think you use below code without 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>
Hitesh Prajapati
  • 2,762
  • 8
  • 23
  • 29