afdi5
afdi5

Reputation: 337

Disable CSS rule using jQuery on a single page

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?

Upvotes: 3

Views: 63

Answers (1)

Nitin Garg
Nitin Garg

Reputation: 262

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

Upvotes: 3

Related Questions