如何删除：hover？

Question

I have a small problem with a script.
I want to have a default action on :hover for clients with Javascript disabled, but for those with Javascript enabled I want another action (actually... same action, but I want to add a small transition effect).

So... How can I do this? I am using jQuery.

Answer 1

Apply two classes to the relvant element. one contains the hover behaviour, and one contains all the other styling.

You can then use the jquery

$(element).removeClass('hover');

method to remove the class with the hover behaviour and then apply whatever you want using

$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });

Answer 2

How about putting the :hover fall-back in a stylesheet that is only loaded if javascript is disabled?

<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>

Answer 3

Here is a solution without hack classes:

CSS:

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

jQuery (uses jQueryUI to animate color):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo

Answer 4

I think the best approach would be to leave the :hover behavior as a fall-back for non-javascript users and then use JQuery to create mouseover and mouseout event handlers to create a different effect for javascript-enabled users.

JQuery Javascript Library - Events/mouseover

Answer 5

It's a very old question but I feel the urge to tell that modernizr provides a very good way to implement these kind of fallbacks.

Just include modernizr in the head and you can do these:

.no-js a:hover {
   set background color and stuff like that
   for cases when no javascript is present
}

On the other hand if you want to do this the other way and only set css when js is present

.js a:hover {
   set background color to default
   and the text decoration
}

It is more or less the same solution as adding a hover tag to the markup, but a little more robust.

Answer 6

I HAVE FOUND YOUR SOLUTION

basically you start out by redefining what you did with the css hover. (naturally you would do this by dynamically pulling the information from the style) then do whatever you want to in jquery with mouseover/mouseout events

this allows you to keep the :hover event in your css because jquery is binding your original styles to the element. In essence disabling the :hover event.

if your css is:

a.class {
  background-color: #000000;
  background-position: 0 0;
  }
a.class:hover {
  background-color: #ffffff;
  background-position: 100% -50px;
  }

your jquery would be somthing like:

jQuery("a.class").each(function () {

  var oldBackgroundColor = jQuery(this).css("backgroundColor");
  var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':oldBackgroundColor,
        'backgroundPosition':oldBackgroundPosition
  });

})
.bind("mouseover", function() {

  doSomething();

})
.bind("mouseout", function() {

  doSomething();

})

Answer 7

You could strip all :hover style rules from document.styleSheets.

Just go through all CSS styles with JavaScript and remove all rules, which contain ":hover" in their selector. I use this method when I need to remove :hover styles from bootstrap 2.

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

I did use underscore for iterating arrays, but one could write those with pure js loop as well:

for (var i = 0; i < document.styleSheets.length; i++) {}

Answer 8

You can globally enable behavior across the entire document by using a single css rule, and then disable that rule in one statement in javascript, while installing the new event handler.

Add a class to your html body tag:

<html>
  <body class="use-hover">
  ...

Default behavior in your css, let's say to bold links on hover:

body.use-hover a:hover
  font-weight: bold

And in your js, when run will remove the default behavior and do something else:

$(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    // Do something when hovered
  }).live('mouseout', function() {
    // Do something after hover is lost
  });
});

Answer 9

You can redraw element after click
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display;  // don't worry about previous display style

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
}, 100); // you can play with this timeout to make it as short as possible

}

Answer 10

Vanilla JS version of Mikael Lepistö's answer

for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    var rulesToLose = [];
    for (var j = 0; j < sheet.cssRules.length; j++) {
        var rule = sheet.cssRules[j];

        if (rule && rule.selectorText && rule.selectorText.indexOf(':hover') >= 0) {
            rulesToLose.push(j);
        }
    }

    // Iterate backwards to prevent pointing to the wrong index while sheet rules get deleted
    for (var k = rulesToLose.length - 1; k >= 0; k--) {
        sheet.deleteRule(rulesToLose[k]);
    }
}