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