Set a hover based on class

Question

I have the following HTML    lt div class  menu  gt       lt a class  main-nav-item  href  home  gt home lt  a gt       lt a class  main-nav-item-current  href  business  gt business lt  a gt       lt a class  main-nav-item  href  about-me  gt about me lt  a gt   lt  div gt    In CSS  I want to set the a hover for these menu items to a particular color  So I write    menu a hover       color  DDD      But  I want to set this a hover color only for those  lt a gt  tags with the class main-nav-item and not the main-nav-item-current  because it has a different color and shouldn t change on hover  All  lt a gt  tags within the menu div should change color on hover except the one with the current class   How can I do it using CSS   I tried something like   menu a hover  main-nav-item       color  DDD      thinking that only ones with main-nav-item class will change color on hover  and not the current one  But it is not working

User · Answer

Set a hover based on class you can simply try   a main-nav-item hover

User · Answer

Cascading is biting you  Try this    menu  gt   main-nav-item hover               color  DDD          This code says to grab all the links that have a class of main-nav-item AND are children of the class menu  and apply the color  DDD when they are hovered

User · Answer

try this   div   text-decoration none  font-size 16  display block  padding 14px      div a hover   background-color  080808  color white      lets say we have a anchor tag used in our code and class div  is called in the main program  the a hover will do the thing  it will give a vampire black color to the background and white color to the text when the mouse is moved over it that s what hover means

User · Answer

One common error is leaving a space before the class names   Even if this was the correct syntax    menu a hover  main-nav-item   it never would have worked   Therefore  you would not write    menu a  main-nav-item hover   it would be    menu a main-nav-item hover

User · Answer

how about   main-nav-item hover  this keeps the specificity low

User · Answer

Try this    menu a main-nav-item hover       In order to understand how this works it is important to read this the way the browser does   The a defines the element  the  main-nav-item qualifies the element to only those which have that class  and finally the psuedo-class  hover is applied to the qualified expression that comes before   Basically it boils down to this      Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu

[html] Set a:hover based on class

Examples related to html

Examples related to css

Examples related to colors

Examples related to hover

Examples related to anchor