如何使用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>

我只想在鼠標懸停時更改顏色。這是我嘗試過的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;
    }

您需要更改效果的背景色或更改字體顏色等。