Can I disable a CSS hover effect via JavaScript

Question

I   m trying to prevent the browser from using the  hover effect of the CSS  via JavaScript   I have set the a and a hover styles in my CSS  because I want a hover effect  if JS isn   t available  But if JS is available  I want to overwrite my CSS hover effect with a smoother one  using the jQuery color plugin for example    I tried this      ul mainFilter a   hover       function e   e preventDefault       do my stuff             function e   e preventDefault       do my stuff          I also tried it with return false   but it does not work   Here is an example of my problem  http   jsfiddle net 4rEzz   The link should just fade without getting gray   As mentioned by fudgey  a workaround would be to reset the hover styles using  css   but I would have to overwrite every single property  specified in the CSS  see here  http   jsfiddle net raPeX 1     I am looking for a generic solution   Does anyone know how to do this   PS  I do not want to overwrite every style i have set for the hover

User · Answer

Actually an other way to solve this could be, overwriting the CSS with insertRule.

It gives the ability to inject CSS rules to an existing/new stylesheet. In my concrete example it would look like this:

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

Demo with my 4 years old original example: http://jsfiddle.net/raPeX/21/

User · Answer

Use a second class that has only the hover assigned   HTML    lt a class  myclass myclass hover  href     gt My anchor lt  a gt    CSS    myclass          all anchor styles         myclass hover hover         example color       color  00A       Now you can use Jquery to remove the class  for instance if the element has been clicked    JQUERY       myclass   click  function e        e preventDefault          this  removeClass  myclass hover           Hope this answer is helpful

User · Answer

I would use CSS to prevent the  hover event from changing the appearance of the link   a    font normal 12px 15px arial verdana sans-serif    color  000    text-decoration none      This simple CSS means that the links will always be black and not underlined  I cannot tell from the question whether the change in the appearance is the only thing you want to control

User · Answer

I used the not   CSS operator and jQuery s addClass   function  Here is an example  when you click on a list item  it won t hover anymore   For example   HTML   lt ul class  vegies  gt       lt li gt Onion lt  li gt       lt li gt Potato lt  li gt       lt li gt Lettuce lt  li gt   lt ul gt    CSS   vegies li not  no-hover  hover   color  blue      jQuery      vegies li   click  function          this  addClass  no-hover

User · Answer

Try just setting the link color      ul mainFilter a   css  color    000      Edit  or better yet  use the CSS  as Christopher suggested

User · Answer

This is similar to aSeptik s answer  but what about this approach  Wrap the CSS code which you want to disable using JavaScript in  lt noscript gt  tags  That way if javaScript is off  the CSS  hover will be used  otherwise the JavaScript effect will be used   Example    lt noscript gt   lt style type  text css  gt  ul mainFilter a hover        some CSS attributes here       lt  style gt   lt  noscript gt   lt script type  text javascript  gt     ul mainFilter a   hover       function o         do your stuff                function o         do your stuff            lt  script gt

User · Answer

I d recommend to replace all  hover properties to  active when you detect that device supports touch  Just call this function when you do so as touch     function touch       if   ontouchstart  in document documentElement        for  var sheetI   document styleSheets length - 1  sheetI  gt   0  sheetI--          var sheet   document styleSheets sheetI         if  sheet cssRules            for  var ruleI   sheet cssRules length - 1  ruleI  gt   0  ruleI--              var rule   sheet cssRules ruleI              if  rule selectorText                rule selectorText   rule selectorText replace   hover     active

User · Answer

You can manipulate the stylesheets and stylesheet rules themselves with javascript  var sheetCount   document styleSheets length  var lastSheet   document styleSheets sheetCount-1   var ruleCount  if  lastSheet cssRules       Firefox uses  cssRules      ruleCount   lastSheet cssRules length    else if  lastSheet rules       IE uses  rules      ruleCount   lastSheet rules length    var newRule    a hover   text-decoration  none  important  color   000  important         insert as the last rule in the last sheet so it    overrides  not overwrites  previous definitions lastSheet insertRule newRule  ruleCount     Making the attributes  important and making this the very last CSS definition should override any previous definition  unless one is more specifically targeted  You may have to insert more rules in that case

User · Answer

There isn   t a pure JavaScript generic solution  I   m afraid  JavaScript isn   t able to turn off the CSS  hover state itself   You could try the following alternative workaround though  If you don   t mind mucking about in your HTML and CSS a little bit  it saves you having to reset every CSS property manually via JavaScript   HTML   lt body class  nojQuery  gt    CSS     Limit the hover styles in your CSS so that they only apply when the nojQuery  class is present     body nojQuery ul mainFilter a hover          CSS-only hover styles go here        JavaScript     When jQuery kicks in  remove the nojQuery class from the  lt body gt  element  thus    making the CSS hover styles disappear     function            body   removeClass  nojQuery

[javascript] Can I disable a CSS :hover effect via JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to css