css buttons hover effect is not working

Question

This is my CSS code:

body #slider #btn_edit{
   position: fixed;
   width: 100px;
   height: 100px;
   right:10px;
   top:8px;
   color: inherit;
   background-color: transparent;
   border: none;
}

body #slider #btn_edit :hover {
   color: red;
}

And this is my JavaScript code where I create the button:

var efb = document.createElement("button");
efb.id = 'btn_edit';
efb.innerHTML = 'EDIT';
document.getElementById("slider").insertBefore(efb, 
document.getElementById("pages").nextSibling);

If I hover over the button nothing happens. The JavaScript code works just fine but I'm having a problem with the css part; it does not turn red.

Answer 1

The :hover selector should be attached to your element without the white space.

body #slider #btn_edit:hover {
   color: red;
}

https://jsfiddle.net/w3ht37p1/

Answer 2

Remove space between "#btn_edit :hover". Check snippet code below. Hope it helps . Also make sure your html looks like mine or the css can target through parents to child(cascading)

 body #slider #btn_edit{ position: fixed; width: 100px; height: 100px; right:10px; top:8px; color: inherit; background-color: transparent; border: none; } body #slider #btn_edit:hover {/**Removed space between "#btn_edit :hover" **/ color: red; } 

 <div id="slider"> <!--divs, span ...--> <!--divs, span ...--> <button id="btn_edit"> button </button> <!--divs, span ...--> <!--divs, span ...--> </div>