Javascript css按钮悬停效果不起作用

这是我的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部分有问题；它不会变为红色。

应将：悬停选择器附加到元素上，且不带空格

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

删除“#btn_编辑：悬停”之间的空格。检查下面的代码片段。希望能有帮助 . 还要确保你的html看起来像我的，或者css可以通过父对象到子对象（级联）

主体#滑块#btn#U编辑{
位置：固定；
宽度：100px；
高度：100px；
右：10px；
顶部：8px；
颜色：继承；
背景色：透明；
边界：无；
}
正文#滑块#btn_编辑：悬停{/**删除了“#btn_编辑：悬停”之间的空格**/
颜色：红色；
}

按钮

我们可以看到您的HTML吗？语法错误：删除

id

选择器和伪类之间的空格，例如：

主体#滑块#btn\u编辑：悬停

按钮似乎不在

滑块

元素内，而是在，所以css选择器应该是类似于

body#btn\u edit:hover的东西

我自己也试过了，但仍然不起作用我包括了JSFIDLE，它显示为正在工作。。。也许你没有提供正确的信息？或者你想改变背景颜色而不是改变文本的颜色？您也可以在浏览器中使用其他CSS覆盖。。。您可以在chrome开发工具中检查这一点。