How to change div background softly on hover?

Question

I was searching for a way to change the background of the body of the page when the user hovered a specific link on a page (I was planning to change the background to a different color depending on the link hovered), but i was intending to make this effect works softly, just like the transition effect in CSS. Is there any way to do it? Using JS or even CSS?

For the hover effect i would use the JQuery's hover function, but I can't find any way for the softly transition stuff.

I've just updated my answer/fiddle – Kevin Lynch Aug 30 '13 at 19:45 — Kevin Lynch, Aug 30 '13 at 19:45
http://jsfiddle.net/y5yBg/2/embedded/result/ – Muhammad Umer Aug 30 '13 at 19:57 — Muhammad Umer, Aug 30 '13 at 19:57

Kevin Lynch · Accepted Answer · 2013-08-31T08:21:06.163

3

You can do this with CSS only with relative easing and use a div with absolute positioning to unobtrusive act as the body.

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;
}

You can find out more info here

EDITED - jQuery version also

The way to select a parent, ie body you would need to use jQuery. It can be very easy to apply. The way i would do it, so then i don't have to create a lot of classes etc, is by giving the a an id that is the name color. Then I would use that as the identifier for the color.

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

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

edited Aug 31 '13 at 08:21

answered Aug 30 '13 at 19:26

Kevin Lynch

24,427
3
36
37

Nice trick. BTW, `position: fixed` wouldn't be a better choice? http://jsfiddle.net/Hc7UW/4/ – biziclop Aug 30 '13 at 20:01
1

You should post the HTML and remark that for this to work the a elements must be siblings ahead of body. People that don't know how ~ works may have a hard time figuring why it doesn't work for them. Nice trick anyway !! – vals Aug 30 '13 at 20:29
Thanks, i will go for this option, but just one question: Is there any way to make the **a and the ~** work inside the **#body** div? – Yasser Lima Aug 31 '13 at 06:28
@YasserLima not in CSS alone. But if carefully planed it can be done with only 4 lines of jQuery and it will apply to all links. See my edit. – Kevin Lynch Aug 31 '13 at 08:25
Thank you very much, i will use your solution. – Yasser Lima Sep 04 '13 at 14:22

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

You should be able to adapt the answer found in this question to suit your needs. You can replace the $(this) with the actual selector you want to use (presumably $('body')). Just keep in mind that you'll need an additional library (either jQuery UI or the jQuery color plugin) on top of the regular jQuery library.

edited May 23 '17 at 12:21

Community

1
1

answered Aug 30 '13 at 19:11

Alex

980
8
20

Or instead of jQuery UI, the jQuery Color plugin could be used: https://github.com/jquery/jquery-color – biziclop Aug 30 '13 at 19:12
1

@biziclop I suppose I should have mentioned that too. I edited my answer to include it. – Alex Aug 30 '13 at 19:15

score 0 · Answer 3 · answered Aug 30 '13 at 19:20

0

Solution using jQuery + CSS3 transitions:

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;
}

answered Aug 30 '13 at 19:20

biziclop

14,466
3
49
65

no need for the true/false switch since mouseover and mouseout only fire once per transition. `$('a').on("mouseover mouseout", function(){ $b.toggleClass('red');});` – Geert-Jan Aug 30 '13 at 20:50

score 0 · Answer 4 · answered Aug 30 '13 at 19:56

This answer is much jquery oriented. Meaning you wont have to do much in css.

So you can do stuff like generate different colors and append them right away without having to re-configuring css style sheet.

Demo: http://jsfiddle.net/y5yBg/2/

Code

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]);
    });
});

How to change div background softly on hover?

4 Answers4