remove/unbind hover on anchors

Question

html

<a href="home.html">Home</a>

css

a {
   color: blue;
}
a:hover {
   color: red;
}

now as you can see <a> now would be color red on hover.

Question
How do I remove hover via jQuery?
I have tried: $('a').unbind('hover'); and $('a').unbind('mouseenter mouseleave')

I come to think why it won't work, is this not hover()?

Elin

Answer 1

Since a:hover is not bound event on the anchor tag and is only a pseudo class you won't have success unbinding the .hover() event.

If you want to change the behavior then you can do two things

1. remove the a:hover styles

2. bind a hover event on the anchor tag and set the css accordingly.

Tommy

Answer 2

No. This is a CSS rule, not a JavaScript event.
The easiest way to change the color is via a stronger CSS rule, for example:

a.NoHover:hover {
   color: blue;
}

or

body a:hover {
   color: blue;
}

Rishi

Answer 3

You can add/remove classes and use JQuery to act accordingly. So you should create classes for both normal and hover state. For example, you can remove styling from the element like this:

$('a').mouseover(function(){
  $(this).removeClass();
});

But I would suggest you to actually add and remove classes accordingly using:

addClass()
removeClass()

Viper

I don't think this will work since it is not added as a class. – Tommy

removeClass will not change the color, but will remove all classes and may wreak havoc on the page's design. – Rishi

@Kobi: Actually i am asking him to add classes for normal and hover states as an alternative. – Viper

Answer 4

If its only color you are concerned about this might help.

$('a').each(function() {
   var $this = $(this);
   $this.css('color', $this.css('color'));
 });

The element's style property will override the properties set in any CSS selectors. The theory has been tested and works fine. This plugin will read arbitrary css properties and set them back therefore "sticking" them.

$.fn.stickCss = function(props) {
  var stick = (props || '').split(/\s+/);
  return this.each(function() {
    var $this = $(this);
    $.each(stick, function(i, prop) {
      $this.css(prop, $this.css(prop));
    });
  });
};

// example usage:
$('a').stickCss('color background-color margin padding');

Veriee