Question

I have a hidden div that I show when the mouse hovers.

Then when I click the text changes and I want the div to be permanently shown. The problem is that it disappears again when the mouse moves off.

Is there a way in jQuery to override the mouse out hide in the css?

Thanks

CSS

.saveCompare {
    display:none;
    margin-left: 10px;
    background-color:#BDD455;
    color:#ffffff;
    padding: 2px 8px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
}

.listingContainer:hover .saveCompare {
  display: inline;
}

jQuery

        $("div.saveCompare").click(function() {
            $(this).text('Compare Added');
            $(this).show();
            return false;
        });

Answer 1

Thats probably because of your “display:none” in the “.saveCompare”. The div still has this class. So its going to hide the div.
Maybe you can write a new class:

.saveCompareNew {
    display:inline;
    margin-left: 10px;
    background-color:#BDD455;
    color:#ffffff;
    padding: 2px 8px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px; 
}

And then use this call to remove your old class and add your new class

.removeClass("saveCompare").addClass("saveCompareNew")

Thats probably no the best solution, but it should work.