javascript - css 按钮悬停效果不起作用

Question

这是我的 CSS 代码:

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

这是我创建按钮的 JavaScript 代码:

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

如果我将鼠标悬停在按钮上，什么也不会发生。 JavaScript 代码工作正常，但我在 css 部分遇到了问题；它不会变红。

Answer 1

:hover 选择器应该附加到你的元素上，没有空格。

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

https://jsfiddle.net/w3ht37p1/