how to add hover effect to button using css

Question

i'm trying to add hover effect to my menu.This is my html

<div class="nav-top-menu nav-top">
 <span class="menu-icons">
   <button class="menu-button hoverEfect">
     <i class="fa fa-cog fa-2x"></i>
     <span class="menu-icons-text" id="userName">Enhanzer(pvt)ltd</span>
    </button>
  </span>
</div>

i just want to change color when mouse over.This is css that i tried

.nav-top-menu .hoverEfect button:hover 
{
  color: #65b4d7;
}

can anyone help me to do this. i don't want to use javascript or jquery

Answer 1

Change this:

.nav-top-menu .hoverEfect button:hover 

To this:

.nav-top-menu .hoverEfect:hover 

As .hoverEffect is itself a button

You may also use:

.nav-top-menu button.hoverEfect:hover 
{
  color: #65b4d7;
}

Answer 2

spaces in css chain to children. as such you will need to adjust your css to the following:

.nav-top-menu button.hoverEfect:hover 
{
  color: #65b4d7;
}

Answer 3

    .nav-top-menu .hoverEfect button:hover 
  {
     background-color: #65b4d7;
    }

you need to change back ground color for the effect or change the font color etc.