CSS：悬停在为孩子而不是元素本身加长时

Question

我有一个简单的CSS文件，内容如下：

button {
  border-radius: 4px;
  border-style: none;
  padding: 8px 16px 8px 16px;
  cursor: pointer;
  background-color: #2a5788;
  color: white;
}

button :hover {
  color: white;
  background-color: black;
}

在HTML文件中，我有一个简单的按钮。按钮样式将按预期方式应用，但是：hover属性将被忽略。但是，如果我在按钮内放一些东西（例如图标），则当鼠标悬停在图标上时，图标背景会变成黑色。

<button>
    <i class="fas fa-play"></i>
    Adicionar Rastreio
</button>

我是CSS的新手，所以我可能会缺少一些东西。

我该如何解决这个问题？

Answer 1

删除空格button :hover {

Read More

button {
  border-radius: 4px;
  border-style: none;
  padding: 8px 16px 8px 16px;
  cursor: pointer;
  background-color: #2a5788;
  color: white;
}

button:hover {
  color: white;
  background-color: black;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<button>
    <i class="fas fa-play"></i>
    Adicionar Rastreio
</button>