CODEWITHSUNDEEP
jquerycssinternet-explorerbutton
chris
chris

Reputation: 37480

How can I restore the "default" button style

I have a save button, and when the user mouses over it, I change some styles - for example:

$('.saveButton').mouseover(function() {
   $(this).css("background-color", "red");
   $(this).parents('fieldset').css("border", "2px solid red");
});

When the mouse leaves the button, I would like to restore the original:

$('.saveButton').mouseout(function() {
   $(this).css("background-color", "#EEE");
   $(this).parents('fieldset').css("border", "1px solid gray");
});

However, leaving aside the matter of whether or not the default button background color is #EEE, when this code executes the button loses its rounded look, and has square corners.

Is it possible to do this?

Upvotes: 3

Views: 9149

Answers (5)

RoToRa
RoToRa

Reputation: 38431

I would suggest not to set the properties directly, but set a class/classes instead:

$('.saveButton').mouseover(function() {
   $(this).addClass('highlight');
   $(this).parents('fieldset').addClass('highlight');
}).mouseout(function() {
   $(this).removeClass('highlight');
   $(this).parents('fieldset').removeClass('highlight');
});

With 

.saveButton.highlight { /* Double class selector is broken in IE6 */
   background-color: red;
}

fieldset.highlight {
  border: 1px solid red;
}

If for some reason you don't want to do that, instead of setting the properities to a specfic value, but to an empty string. That should "remove" that property:

$('.saveButton').mouseout(function() {
   $(this).css("background-color", "");
   $(this).parents('fieldset').css("border", "");
});

Upvotes: 7

Stephen
Stephen

Reputation: 18964

This would be far better suited for CSS :hover pseudo-clas. And much faster than javascript too.

.fieldset-class:hover { border: 2px solid red;}
.saveButton:hover { background-color:red;}

Any time you only need to change CSS on mouseover/mouseout events, use this method.

Here is a live example from Soh Tanaka of CSS :hover in action. Those popup tooltips on the bar? Pure CSS.

UPDATE
There is a flaw in my CSS in relation to your problem model. This will cause the hover on the fieldset to fire even if you are not hovering on the button. I would use the second line, .saveButton:hover in CSS, and use JavaScript for the fieldset hover, using a class as the other answers have pointed out.

(Actaully I would change my problem model to accept a pure CSS solution, but I digress...)

Upvotes: 2

Andrea Turri
Andrea Turri

Reputation: 6500

Yes, you can set up a class for the mouseEnter that make the bg color and border color in red.

Than you can use toggleClass for the event, so that it will toggle your event adding and removing the class, restoring always the default button.

Upvotes: 0

Marcie
Marcie

Reputation: 1259

Your best bed is to create a CSS class for the styles you are adding on the mouseover and add it with jQuery using "addClass". Then you can just remove your temporary style using "removeClass".

Upvotes: 0

Emil Ivanov
Emil Ivanov

Reputation: 37643

Yes, use a class and some css:

/* in style.css */
.over {
    border: 2px solid red;
}
.over .saveButton {
    background-color: red;
}

Then just add/remove this class to the parent fieldset:

$('.saveButton').mouseover(function() {
     $(this).parents('fieldset').addClass('over');
}).mouseout(function() {
     $(this).parents('fieldset').removeClass('over');
});

Removing the class will revert the button and the field state they were before that.

As a good practice - it is better to keep the presentation (how things look) in css and use javascript to switch between them - it's much easier to manage that way.

Upvotes: 4

Related Questions