Disable CSS rule using jQuery on a single page

Question

I'm trying to disable this css rule on a single page:

[id^="ITEMROW_"]:hover
{
  background-color: #F6F6F6 !important;
}

Using the following jQuery:

$("id^=ITEMROW_").css("hover", "");

However, it is not working. The css code is still being applied.

Can someone help with this?

Possible duplicate — Removing or altering CSS pseudo class in jQuery — Andy Hoffman
– Andy Hoffman, Commented Mar 8, 2019 at 8:12
Possible duplicate of Change :hover CSS properties with JavaScript — Snow
– Snow, Commented Mar 8, 2019 at 8:12

Nitin Garg · Accepted Answer · 2019-03-08 08:34:59Z

3

This is because hover is a pseudo class not a property. You can't directly edit the pseudo class in jquery. Because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :hover specified.

Like

[class^="newclass"]:hover
{
  background-color: #F6F6F6 !important;
}

and toggle it

$('#ITEMROW_').toggleClass('newclass');

edited Mar 8, 2019 at 8:34

answered Mar 8, 2019 at 8:14

Nitin Garg

2622 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nitin Garg Over a year ago

hope this will solve your query. if require more help just ask

Collectives™ on Stack Overflow

Disable CSS rule using jQuery on a single page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related