CSS :hover being being aplied for children, but not for the element itself

Question

I have a simple CSS file with the following content:

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;
}

In the HTML file, I have a simple button. The button style is being applied as expected, but, the :hover property is simply ignored. But, if I put something inside the button, like an icon, when the mouse is hover the icon, the icon background turns black.

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

I'm new to CSS, so I could be missing something.

How do I solve this problem?

I don't think this has anything to do with Angular its just CSS — dota2pro, Jun 28 '19 at 16:04

score 3 · Accepted Answer · answered Jun 28 '19 at 16:00

Remove the space 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>

CSS :hover being being aplied for children, but not for the element itself

1 Answers1