时间戳

首页 > 解决方案 > CSS :hover 被应用于子元素，但不适用于元素本身

html - CSS :hover 被应用于子元素，但不适用于元素本身

问题描述

我有一个包含以下内容的简单 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 新手，所以我可能会遗漏一些东西。

我该如何解决这个问题？

标签： htmlcsscss-selectors

解决方案

删除空间button :hover {

阅读更多

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>

推荐阅读