How do I remove :hover?

前端未结

关注

 9  768

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

相关标签:

9条回答

心在旅途

2020-12-15 04:32

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

})

0 讨论(0)

广开言路

2020-12-15 04:33
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
  });
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
别跟我提以往

2020-12-15 04:34
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(); });
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

我寻月下人不归

2020-12-15 04:34

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

0 讨论(0)

Happy的楠姐

2020-12-15 04:36

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

}

0 讨论(0)

耶瑟儿～

2020-12-15 04:37

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页