CODEWITHSUNDEEP
htmlcss
n179911
n179911

Reputation: 20301

How can I remove hover style in CSS

I have defined this hover for div element 

div.MyCSSClass:hover
{
    background-color: purple;
}

This is my HTML source:

   <div class="
    <ul class="MyParentCSSClass">
    <li>
        <div>
          <div>
            <div class="MyCSSClass">
               <!-- I want to remove CSS hover for this div element -->

I want to remove the hover when the div.MyCSSClass is a child of MyParentCSSClass, So I add this to remove the hover style in CSS:

.MyParentCSSClass div.MyCSSClass:hover
{
}

But it did not work. I still see the same hover style. Is there a way to remove hover in CSS without me creating a new CSS class for my div tag? I want to keep the same name as I have other CSS property uses the 'MyCSSClass'.

Thanks for the suggestion. I tried 

background-color: none !important;

But when I look into chrome, that CSS is being over-written by 

.MyGrandParentClass div.MyCSSClass:hover
{
    background-color: purple;
}

and the html source is

  <div class="MyGrandParent">
    <ul class="MyParentCSSClass">
    <li>
        <div>
          <div>
            <div class="MyCSSClass">
               <!-- I want to remove CSS hover for this div element -->

My question is how my 'Remove hover' css rule is being over-written? I have put "!important" to my rule.

Upvotes: 4

Views: 828

Answers (3)

Prince Sodhi
Prince Sodhi

Reputation: 2955

Background-color : none; is not w3c standard. It will work on some browser but according to w3c standard it's not right way.

So try to use background-color: transparent which will work good on all browsers and w3c can validate your code. enter image description here

Have fun.

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

.MyParentCSSClass div.MyCSSClass:hover { 
  background-color: none;
}

This will overwrite the background color given by div.MyCSSClass:hover. if you are keeping MyParentCSSClass div.MyCSSClass:hover empty as MyParentCSSClass div.MyCSSClass:hover {}, it will not overwrite anything or doing nothing actually.

Upvotes: 3

vohrahul
vohrahul

Reputation: 1191

You need to re-write all the previously added styles to the hover event. In the case you specified, please do the following:

.MyParentCSSClass div.MyCSSClass:hover
{
   background-color: none;
}

Upvotes: 0

Related Questions