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 after mouseout leave the previous background-color and remove #380606? Thank you.
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', '')
});
});?
After lot of struggle finally got it working. ( Perfectly tested)
The below example will also support the fact that color of already clicked button should not be changes
JQuery Code
var flag = 0; // Flag is to check if you are hovering on already clicked item
$("a").click(function() {
$('a').removeClass("YourColorClass");
$(this).addClass("YourColorClass");
flag=1;
});
$("a").mouseover(function() {
if ($(this).hasClass("YourColorClass")) {
flag=1;
}
else{
$(this).addClass("YourColorClass");
};
});
$("a").mouseout(function() {
if (flag == 0) {
$(this).removeClass("YourColorClass");
}
else{
flag = 0;
}
});
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');
}
);
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
This is my solution :
$(document).ready(function () {
$( "td" ).on({
"click": clicked,
"mouseover": hovered,
"mouseout": mouseout
});
var flag=0;
function hovered(){
$(this).css("background", "#380606");
}
function mouseout(){
if (flag == 0){
$(this).css("background", "#ffffff");
} else {
flag=0;
}
}
function clicked(){
$(this).css("background","#000000");
flag=1;
}
})
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.
Source: Stackoverflow.com