Stop style HOVER behaviour with jQuery?

Question

I have a div with style.

This style

 body .d:hover
    {
      background-color:red;
    }

But I want (if possible) that Jquery will stop this hover behaviour.

I tried with

 $(".d").hover(function () { return false;});
 $(".d").mouseenter(function () { return false;});

nothing helped.

any help ?

here is the JSBIN ( I want that after pressing the button - nothing will happen when hovering.)

yeah it is not possible. thanks Felix. ( and i would like a jquery solution rather then applying another style with !important ...:-) — Royi Namir, Jan 29 '13 at 11:19
if d:hover have a single line on style, why just dont change the class name? — Toping, Jan 29 '13 at 11:23
You can't disable CSS behaviour. I would use 2 classes as suggested here : http://stackoverflow.com/questions/5069110/remove-hover-css-behavior-from-element — sdespont, Jan 29 '13 at 11:23
@Ark this is a stupid sample. I want to know if I can **prevent hover behaviour with jquery**. — Royi Namir, Jan 29 '13 at 11:24
You might need to do something like this here: http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript — alexg, Jan 29 '13 at 11:24

score 1 · Answer 1 · answered Jan 29 '13 at 11:24

1

Add a new definition to your CSS:

.d.no-hover:hover {
    background-color: black;
}

Now you can just add the no-hover class to the elements which should no longer have a hover effect:

$(obj).addClass('no-hover');

answered Jan 29 '13 at 11:24

bikeshedder

7,337
1
23
29

score 1 · Answer 2 · answered Jan 29 '13 at 11:34

May be this kind of trick: http://jsbin.com/akunew/14/edit

<div style="border:solid 1px red;height:100px;width:100px;" class="d"> </div>
<input  type="button" value="stop this hover" onclick="stop()" id="btn"/>

remove the class:

function stop(){
  $(".d").addClass('e').removeClass('d');
}

VisioN · Accepted Answer · 2013-01-29T11:46:42.187

If you want to stop this behavior constantly, you may remove the stylesheet rule, according to W3C wiki:

function stop(m) {
    $.each(document.styleSheets, function(i, sheet) {
        $.each(sheet.rules, function(i, rule) {
            if (new RegExp(m + "\\s*:hover").test(rule.selectorText)) {
                sheet.deleteRule(i);
            }  // TODO: improve RegExp
        });
    });
}
stop(".d");

If you want to change the state without removing, there is an option to change styleSheet.disabled property, in case you have the :hover rule set in a separate stylesheet.

Note, that I'm not sure about the compatibility issues here, it should be determined additionally.

DEMO: http://jsbin.com/akunew/10/edit

score 0 · Answer 4 · answered Jan 29 '13 at 11:27

0

When you calling onclick="stop(this)" it will get input as your $(obj), not your element .d.

EDIT There is no javascript solution to remove :hover

answered Jan 29 '13 at 11:27

Morpheus

8,829
13
51
77

Yes, but fixing this does not solve the problem... or did you try it? – Felix Kling Jan 29 '13 at 11:27
oopsss my very bad. fixing – Royi Namir Jan 29 '13 at 11:28

score 0 · Answer 5 · answered Jan 29 '13 at 11:40

based on ur JSBIN example. below code will work

function stop(obj) { $(obj).hover(function () { $(this).css('background-color','white'); return false;}); $(obj).mouseenter(function () { $(this).css('background-color','white'); return false;});

  $('body').append('<style>body div.d:hover {background-color:transparent !important}</style>');
}

u have overwrite :hover css of that particular element

score 0 · Answer 6 · edited Jan 29 '13 at 11:59

0

CSS

.d:hover
{
    background-color:Red;
}
.noClass
{
    background-color:none;
}

JavaScript

function stop()
{
    $(".d").addClass('noClass').removeClass('d');
}

edited Jan 29 '13 at 11:59

Ash Burlaczenko

24,778
15
68
99

answered Jan 29 '13 at 11:41

Priyank Patel

6,898
11
58
88

score 0 · Answer 7 · answered Dec 28 '13 at 19:00

I use a trick- when i am on hover onto an element (and click something inside that HOVERed element), then you can use this javascript method to cancel that hover css:

document.getElementById('sarchevi').className='active';
//on mouse move, remove class
(function(){
    var moved = false
    window.onmousemove = function(e)
    { if(!moved){ moved = true;  document.getElementById('sarchevi').className ='a'; } }
})()

score 0 · Answer 8 · answered Apr 06 '17 at 11:54

I know this question is four years old, but future visitors should know about the modern approach to this particular problem.

You can use a simple solution that (at its core) uses a CSS property and is supported by all browsers except IE < 11.

$('.d').css('pointer-events', 'none');

You might as well just copy this specific class from Bootstrap:

.disabled {
    pointer-events: none;
}

And then apply it via jQuery:

$('.d').addClass('disabled');

Keep in mind, however, that this CSS property prevents the element from capturing any DOM events (such as hover, but also click, etc.)

Stop style HOVER behaviour with jQuery?

8 Answers8