I have a table in my application. I need to start hovering effect on a td when that cell is clicked and then stop hovering till the next click. Also mouseover to the next row of td that (hovering a range of tds). I am new to jquery. Please help.
jQuery('td').hover(function(){
jQuery(this).css("background","#000");
}, function(){
jQuery(this).css("background","green");
});
Why are you using JavaScript to do what CSS was (Essentially) made to do?
ReplyDeletetd { background-color: green; }
td:hover { background-color: #000; }
But, if you're intent is to only have it apply the hover effect when it's been clicked, you can do so with the addition of a new class, "clicked" (or whatever you'd like to name it).
td { background-color: green; }
td.clicked:hover { background-color: #000; }
$(function(){
$('td').click(function(){
$(this).toggleClass('clicked');
});
});
Then only when the "clicked" class is applied will it apply a hover effect. Likewise, you can make "clicked" the (pseudo) hover style sheet using the same code as above, with the addition of:
td.clicked { background-color: #000; }
And here's an example of the above scenarios: http://jsfiddle.net/NNxvP/
Your question was a bit ambiguous so I'm taking a best-shot here. If I'm off base, let me know in a comment and I'll do my best to correct my answer.