Change background color on mouseover and remove it after mouseout
Solution 1
If you don't care about IE ≤6, you could use pure CSS ...
.forum:hover { background-color: #380606; }
.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */
#blue { background-color: blue; }
<meta charset=utf-8>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
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');});
$(document).ready(function(){
$('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});
.forum_hover { background-color: #380606 !important; }
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
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);
});
$(document).ready(function(){
$('.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);
});
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
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'));
}
);
$(document).ready(function(){
$('.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'));
}
);
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
Solution 2
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', '')
});
});
Solution 3
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
Solution 4
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.
Solution 5
HTML:
<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>
jQuery:
$('#id').hover(function(){
$("#hiddenDiv").css('display','block');
},
function(){
$("#hiddenDiv").css('display','none');
}
);
good_evening
Updated on December 10, 2021Comments
-
good_evening over 2 years
I have table which class is
forum
. My jquery code:<script type="text/javascript"> $(document).ready(function() { $('.forum').bind("mouseover", function(){ var color = $(this).css("background-color"); $(this).css("background", "#380606"); $(this).bind("mouseout", function(){ $(this).css("background", color); }) }) }) </script>
It perfectly works, but is it possible to do it in more efficient way without
var color = $(this).css("background-color");
. Just aftermouseout
leave the previous background-color and remove#380606
? Thank you.