ansaurus

Question

Change background color on mouseover and remove it after mouseout

Answer 1

+3 A:

If you don't care about IE ≤6, you could use pure CSS ...

.forum:hover { background-color: #380606; }

With jQuery, usually it is better to create a specific class for this style:

.forum_hover { background-color: #380606; }

and then apply the class on mouseover, and remove it on mouseout. (Example)

$('.forum').hover(function(){$(this).toggleClass('forum_hover');});

If you must not modify the class, you could save the original background color in .data() (Example):

  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });

or (Example)

  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );

KennyTM 2010-09-18 09:52:38

No, I need this done in Jquery actually, it is just a one piece of code.

hey 2010-09-18 09:56:20

Answer 2

A:

This should be set directly in the CSS.

.forum {background-color: #123456}
.forum:hover {background-color: #380606}

If you are worried about the fact the IE6 will not accept hover over elements which are not links, you can use the hover event of jQuery for compatibility.

Andrea 2010-09-18 09:55:38

Answer 3

A:

Try this , its working and simple

HTML

<html>
<head></head>
<body>
    <div class="forum">
        test
    </div>
</body>
</html>

Javascript

$(document).ready(function() {
    var colorOrig=$(".forum").css('background-color');
    $(".forum").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff0')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});

css

.forum{
    background:#f0f;
}

live demo

http://jsfiddle.net/caBzg/

JapanPro 2010-09-18 10:06:31

your variable colorOrig will return null as the css property "background" selector is unreadable by jQuery... use "background-color" or "backgroundColor" instead

joberror 2010-09-19 01:22:31

@joberror, thats right i have edited code, please revisit

JapanPro 2010-09-19 02:00:35

Answer 4

+1 A:

Set the original background-color in you CSS file:

.forum{
    background-color:#f0f;
}

You don't have to capture the original color in jQuery. Remeber that jQuery will alter the style INLINE, so by setting the background-color to null you will get the same result.

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});

Marc Uberstein 2010-09-18 12:47:12

That is a great answer! and it works perfectly... Tested in firebugs

joberror 2010-09-19 01:34:39

Thanks, appreciated! If you want, you can include the jquery.color plugin. Then you have the ability to change color with animation. e.g. $(this).animate({backgroundColor:'#ff0'},400);

Marc Uberstein 2010-09-19 07:10:00

ansaurus

tags:

views:

answers:

Change background color on mouseover and remove it after mouseout

related questions