Question

I am facing background color change problem while using jquery.

When the page loads for the first time and the user hovers over a table row, the table row’s background changes.

Once the user clicks on table row cell to generate a jquery popup, the background color changes of the row that the popup belongs to.

One the user closes the the popup window (using jquery) by clicking anywhere on the document, the highlight on hover feature for the rows mentioned on the first line, get disabled, and I need it to remain in effect as long as none of the popup windows are open.

This is what I tried to add to my jquery, which works until one of the popups are shown once. In otherwords, the code below is triggered once only, rather than remaining in effect like i need to:

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

js fiddle:

http://jsfiddle.net/vUWsb/

Answer 1

try !important:

.fresh{background-color:#ddd !important;}

$("tr").hover(function(){
    $(this).addClass('fresh');
}, function() {
    $(this).removeClass('fresh')    
});

http://jsfiddle.net/vUWsb/6/

---

Something like this?

 $("tr").hover(function(e){
        if ($(".webpopup, .phonepopup").is(":visible")) {
           return false;
        }
       $(this).addClass('fresh');     
    }, function() {
       $(this).removeClass('fresh');
 });

http://jsfiddle.net/vUWsb/10/