How can I remove hover style in CSS

Question

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.

Answer 1

.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.