jQuery override css hide on mouse out

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;
        });

in your mouseout event callback, check if the text has changed. if it has don't hide it. if it hasnt, go ahead and hide it — Ayush
– Ayush, Commented Mar 8, 2012 at 10:46

Thomas · Accepted Answer · 2012-03-08 10:45:47Z

2

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.

answered Mar 8, 2012 at 10:45

Thomas

986 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keith Power Over a year ago

nice quick solution does work well. Although I will redo in the long term to avoid two similar classes. thanks

Ayush · Accepted Answer · 2012-03-08 10:49:06Z

1

Before you hide the form on mouseout do a check

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

answered Mar 8, 2012 at 10:49

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

Comments

m90 · Accepted Answer · 2012-03-08 11:06:31Z

1

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
});

edited Mar 8, 2012 at 11:06

answered Mar 8, 2012 at 10:49

m90

11.8k16 gold badges69 silver badges120 bronze badges

2 Comments

Keith Power Over a year ago

thanks for the answer. Nice solution. I am going to look further into unbind, good tool to have

m90 Over a year ago

Pay attention when using unbind with hover as $(this).unbind('hover') will not work, but you will have to use $(this).unbind('mouseenter mouseleave') instead. A plain $(this).unbind() like in my example will unbind all events.

Collectives™ on Stack Overflow

jQuery override css hide on mouse out

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related