как добавить эффект при наведении на кнопку с помощью CSS

Question

я пытаюсь добавить эффект парения в мой menu.This мой 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> 

я просто хочу, чтобы изменить цвет, когда мышь over.This является CSS, что я попытался

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

может кто-нибудь помочь мне сделать это. я не хочу использовать Javascript или JQuery

Answer 1

Изменить это:

.nav-top-menu .hoverEfect button:hover 

Для этого:

.nav-top-menu .hoverEfect:hover 

Как .hoverEffect сама кнопка

Вы также можете использовать:

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

Answer 2

пробелы в цепи css для детей. как таковой вам нужно будет настроить CSS к следующему:

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

Answer 3

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

вам нужно изменить назад основной цвет для эффекта или изменить цвет шрифта и т.д.