How can I disable the bootstrap hover color for links

Question

I am using Bootstrap  Bootstrap defines a hover  a focus       color   005580      text-decoration  underline     I have this links   CSS-classes  lt a class  quot green quot  href  quot   quot  gt green text lt  a gt   lt a class  quot yellow quot  href  quot   quot  gt yellow text lt  a gt   How can I disable the hoover color  I want the green links to stay green and the yellow ones yellow  without overriding  hover for every single class   this question is not mandatory dependent to bootstrap   I need something like a hover  a focus       color   nonhoovercolor     and I think  yellow       color  yellow  important     is not a good practice

User · Answer

a  background-color transparent  important

User · Answer

I am not a Bootstrap expert  but it sounds to me that you should define a new class called nohover  or something equivalent  then in your link code add the class as the last attribute value    lt a class  green nohover  href     gt green text lt  a gt   lt a class  yellow nohover  href     gt yellow text lt  a gt    Then in your Bootstrap LESS CSS file  define nohover  using the JSFiddle example above    a hover   color  red       Green    a green    color  green       Yellow    a yellow    color  yellow    a nohover hover   color  none       Forked the JSFiddle here  http   jsfiddle net 9rpkq

User · Answer

if anyone cares i ended up with   a       color  inherit

User · Answer

Mark color   005580  as color   005580  important    It will override default bootstrap hover

User · Answer

If you like an ugly hacks which you should never do in real worlds systems  you could strip all  hover style rules from document styleSheets   Just go through all CSS styles with JavaScript and remove all rules  which contain   hover  in their selector  I use this method when I need to remove  hover styles from bootstrap 2     each document styleSheets  function  sheet         var rulesToLoose              each sheet cssRules  function  rule  index             if  rule selectorText  amp  amp  rule selectorText indexOf   hover    gt  0                 rulesToLoose push index                            each rulesToLoose reverse    function  index            if  sheet deleteRule                sheet deleteRule index             else if  sheet removeRule                sheet removeRule index                           I did use underscore for iterating arrays  but one could write those with pure js loop as well   for  var i   0  i  lt  document styleSheets length  i

User · Answer

For me none of the simple solutions above worked  however by changing only the hover I was able to get it to work      hover       color  inherit      text-decoration  none

User · Answer

I would go with something like this JSFiddle   HTML    lt a class  green  href     gt green text lt  a gt   lt a class  yellow  href     gt yellow text lt  a gt    CSS   body    background   ccc      Green    a green  a green hover   color  green       Yellow    a yellow  a yellow hover   color  yellow

[css] How can I disable the bootstrap hover color for links?

Examples related to css

Examples related to twitter-bootstrap

Examples related to href