Change background color on mouseover and remove it after mouseout
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.
$('.forum').hover(function(){$(this).toggleClass('forum_hover');});If you must not modify the class, you could save the original background color in .data():
$('.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
$('.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')); } );
Set the original background-color in you CSS file:
.forum{ background-color:#f0f;}You don't have to capture the original color in jQuery. Remember 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', '') });});
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