如何使用css将悬停效果添加到按钮

Question

我正在尝试将悬停效果添加到我的菜单中。这是我的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;
    }

您需要更改效果的背景颜色或更改字体颜色等。