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

：悬停选择器应贴在没有空白区域的元素上。

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

https://jsfiddle.net/w3ht37p1/

Answer 2

删除“#btn_edit：hover”之间的空格。请查看下面的代码段。希望能帮助到你。还要确保你的html看起来像我的，或者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 {/**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>

css按钮悬停效果不起作用

2 个答案: