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](https://stackoverflow.com/questions/6466586/removing-or-altering-css-pseudo-class-in-jquery#6466781) — Andy Hoffman, Mar 08 '19 at 08:12
Possible duplicate of [Change :hover CSS properties with JavaScript](https://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript) — Snow, Mar 08 '19 at 08:12

Nitin Garg · Accepted Answer · 2019-03-08T08:34:59.090

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 08 '19 at 08:34

answered Mar 08 '19 at 08:14

Nitin Garg

252
2
9

hope this will solve your query. if require more help just ask – Nitin Garg Mar 08 '19 at 08:15

Disable CSS rule using jQuery on a single page

1 Answers1