Background color when cursor hovers over text

• 

  nickpciccone · Member · Jan 19, 2015 at 4:19 am

  • Copy link
  • Add topic to favorites

  I’m new to CSS, trying to add code to give my main menu text a background color when the cursor hovers over it but it’s not quite working how I have it.

  .main-navigation ul li:active{
  background-color: #FF0000;
  }

  Penscratch theme for nicholasciccone.com

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Jan 19, 2015 at 8:55 am

  • Copy link

  You almost got it right :-)

  Modify your style to the following and see if you got the requires effect:

  .main-navigation ul li a:hover {
      background-color: red
  }

• 

  nickpciccone · Member · Jan 19, 2015 at 3:05 pm

  • Copy link

  Awesome, that worked! Now, I’m trying to use that same code to change the font color of that menu, when hovering over, by just changing “background-color” to “font-color,” but that doesn’t seem to work.

  (trying to make the background a solid color and the text white)

  What am I missing?

• 

  staff-happychia · Staff · Jan 19, 2015 at 5:57 pm

  • Copy link

  Font color attribute is just color. So add the following rule to the earlier CSS:

  color: #fff;

  The complete CSS is:

  .main-navigation ul li a:hover {
      background-color: #190707;
   color: #fff;
  }

• 

  nickpciccone · Member · Jan 20, 2015 at 12:24 am

  • Copy link

  That did the trick! This was very encouraging, haha. Thanks for all your help.