html - 将鼠标悬停在 div 内的 <button> 上不工作，在外部工作

Question

这不会为我的元素提供悬停状态:

.button:hover {
  opacity: .7;
}

<div id="banner">
  <div id="frame1">
    <p id="txt1" class="white droid">Some dogs</p>
    <p id="txt2" class="white droid">Don't like to bark</p>
    <button class="button">Reverse!</button>
  </div>  
  <div id="border"></div>
</div>

如果我将 HTML 更改为以下内容，该按钮会给我一个悬停状态:

.button:hover {
  opacity: .7;
}

<div id="banner">
  <div id="frame1">
    <p id="txt1" class="white droid">Some dogs</p>
    <p id="txt2" class="white droid">Don't like to bark</p>
  </div>   
  <div id="border"></div>
  <button class="button">Reverse!</button>
</div>

注意:包含按钮的DIV只是设置为绝对定位。

我需要做些什么才能在嵌套 DIV 中使用按钮获得悬停状态吗？

Answer 1

由于某种原因，在 chrome 中，我只能通过增加按钮上的 z 索引来让它工作。我将听从建议并在开发人员工具中查找有问题的行。抱歉，我应该发布所有代码。现在需要咖啡。