CODEWITHSUNDEEP
jqueryunbind
Reigel Gallarde
Reigel Gallarde

Reputation: 65264

remove/unbind hover on anchors

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()?

Upvotes: 5

Views: 6085

Answers (4)

gnarf
gnarf

Reputation: 106332

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

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382696

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()

Upvotes: 1

rahul
rahul

Reputation: 187030

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.

Upvotes: 5

Kobi
Kobi

Reputation: 138017

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

Upvotes: 2

Related Questions