jQuery override css hide on mouse out
<p>I have a hidden div that I show when the mouse hovers.</p>

<p>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.</p>

<p>Is there a way in jQuery to override the mouse out hide in the css?</p>

<p>Thanks</p>

<p>CSS</p>

<pre><code>.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;
}
</code></pre>

<p>jQuery</p>

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