Overriding css for a specific div?

Question

i have a a:hover for all my links on my page:

a:hover {
  background-color: blue;
  text-decoration: underline;
  color: black;
}

but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?

#what_we_offer a:hover {
  background-color: none:
  text-decoration: none;
  color: none;
}

basically i don't want it to do any of the above when it hovers over them specific links.

thanks

Answer 1

Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.

#what_we_offer a:hover {
  background-color:#fff;/*presuming was originally white*/
  text-decoration:none;
  color:#000;/*presuming was originally black*/
}

PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.

Answer 2

#what_we_offer a:hover {
  background-color: transparent;
  text-decoration: none;
  color: none;
}

use transparent instead of none, that works.

thanks for all the answers.

Answer 3

Rather than using id with css use Class

/* for link where you want to change color on hover */
    .Link a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: red; 
    } 

/* for link where you dont want to change color on hover */
    a:hover { 
      background-color: none: 
      text-decoration: none; 
      color: none; 
    }