CODEWITHSUNDEEP
javascriptjquery
Ionuț Staicu
Ionuț Staicu

Reputation: 22156

How do I remove :hover?

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.

Upvotes: 29

Views: 93831

Answers (10)

Kerry Johnson
Kerry Johnson

Reputation: 1024

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

Upvotes: 0

Artemiy StagnantIce Alexeew
Artemiy StagnantIce Alexeew

Reputation: 862

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

}

Upvotes: 1

Mikael Lepist&#246;
Mikael Lepist&#246;

Reputation: 19718

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++) {}

Upvotes: 0

vinczemarton
vinczemarton

Reputation: 8156

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.

Upvotes: 2

kingjeffrey
kingjeffrey

Reputation: 15260

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

Upvotes: 12

aceofspades
aceofspades

Reputation: 7586

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

Upvotes: 0

Chico Web Design
Chico Web Design

Reputation: 11

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

})

Upvotes: 1

foxy
foxy

Reputation: 2168

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>

Upvotes: 19

benlumley
benlumley

Reputation: 11382

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

Upvotes: 29

Andrew Hare
Andrew Hare

Reputation: 351466

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

Upvotes: 3

Related Questions