(using scss/css) the action hover in my button is not working

Issue

so my problem as i said already is that i can’t see the hover action when hovering the button

Here is my button in html

<button class="btn">button</button>

And here is my code in scss to hover

 .btn{
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;
    :hover{
        background-color: aqua;
    }
}

Here is the code in css after ‘sass watcher’ make it css

.btn {
  background-color: #e5383b;
  font-variant-caps: all-petite-caps;
  border-radius: 2px;
}

.btn :hover {
  background-color: aqua;
}

Here is an image that shows the result

(You can’t see my mouse, but i hovered it)

Solution

You need to remove the space on .btn :hover {. A space between selectors indicates nested elements so .a .b { would style a b tag nested within an a.

To do this you can add an ampersand to the hover state when nesting like this.

.btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    &:hover {
        background-color: aqua;
    }
}

An ampersand indicates you should take the parent element and replace it right there. So scss will take .btn and chain it with :hover and you will get the result you expected.

Answered By – Luke Ingalls

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0