JS创建的CSS按钮hover效果失效问题求助

嘿，我一眼就揪出问题所在啦！你的CSS hover选择器里多了个不该有的空格，这就是hover效果完全没反应的原因～

先看你原来的CSS代码里的hover规则：

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

这里#btn_edit和:hover之间的空格会让浏览器理解成：选中#btn_edit内部的所有子元素，当这些子元素被hover时应用样式。但你的按钮本身没有子元素（只有文本内容），所以这条规则根本找不到可作用的对象，自然不会生效。

修正后的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; 
}

额外小优化建议 #

为了让交互体验更友好，你还可以给按钮加上鼠标悬停时的指针样式：

body #slider #btn_edit{ 
  /* 保留原有所有样式 */
  cursor: pointer;
}

这样用户悬停时能明确知道这是个可点击的按钮～

另外你的JavaScript代码完全没问题，按钮能正常插入到DOM结构里，只需要修正CSS的选择器就可以让hover效果正常工作啦！

内容的提问来源于stack exchange，提问作者Flextoon