jQuery覆盖CSS鼠标隐藏

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.

Answer 2

Before you hide the form on mouseout do a check

$('#yourElement').hover(function(){
   //show your form
},function(){
   if (!textHasChanged)
      //hide your form
});

Answer 3

As far as I know it is not possible to manipulate pseudo-classes in JavaScript (correct me if I'm wrong). You could go for a all-jQuery solution with sth like this:

$('.saveCompare').hide(); //you could do this in the CSS as well    
$('.listingContainer').hover(function(){
   $(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
   $(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
  $(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});