Remove 'body a:hover' CSS behavior from element

Question

This question was asked before, but with slightly different cases. In my case, I have body a:hover style defined and I want to disable it for some elements. According to a suggested answer to this question I have tried:

CSS:

body:not(.nohover a) a:hover {  
    color: #006699;
}

HTML:

<div class="nohover">
   <a href="mylink.html">My link text</a>
</div>

But it did not work. Does anyone know if it can be done with the :not pseudo-class? Or in a different way?

Edit: I think dippas was not wearing his reading glasses when marking this question as a duplicate; even stronger as an "exact duplicate". Fortunately, people like Edmund Reed tried to be helpful instead, and helped me answering my question.

have you add class `nohover` in your `` element in which you want to disable? `blah` — FIx, Apr 28 '17 at 03:38
`body:not(.nohover a) a:hover` should be `body a:not(.nohover):hover`, and apply the class to the `a` itself, not a surrounding div. — ESR, Apr 28 '17 at 03:59
@Edmund Reed: your answer proves to be working! Thanks a lot. — esims, Apr 28 '17 at 04:42

FIx · Answer 1 · 2017-04-28T04:36:40.277

try this

body:not(.nohover)>a:hover { 
 color: #006699;
}

<body>
  <a>hover</a>
  <a>hover</a>     
  <div class="nohover">
    <a>no hover</a>
  </div>  
</body>

the css only applied if the structure is like body > a or will not work on structure body > .nohover > a. and this css also will not applied if the structure did not meet body > a, thus if you try to applied this css to element with structure body > element > a this css wont work

Remove 'body a:hover' CSS behavior from element

1 Answers1