悬停在 div 内部的 <button> 上不起作用，在外部起作用答案

【问题标题】：hover not working on <button> inside div, works outside悬停在 div 内部的 <button> 上不起作用，在外部起作用
【发布时间】：2016-08-31 11:52:52
【问题描述】：

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

.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 中处于悬停状态？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。请参阅How to create a Minimal, Complete, and Verifiable example 您需要提供ALL 相关 CSS 来重现问题。
...尤其是定位...
我试过你的演示，it works fine。很明显，您没有显示所有代码，因此您的主样式表中可能有冲突的 CSS。如果我不知道自己在做什么，我就帮不上忙。
您当前的代码不会重现您的错误......它要么特定于您选择的浏览器，要么如上所述，我们没有导致它的代码。您可能很容易通过像 Firebug 这样的元素检查找到有问题的、最重要的行，但这是您必须自己做的事情。
在 Firefox Mac 上可以正常工作 - 显然是浏览器问题

标签： html css button nested hover

【解决方案1】：

我遇到了同样的问题，我不知道这是否是正确的做法，但是增加锚标签（a）的z-index，使其高于它的父div，对我有用

.showcase__content a {
    background: rgba(41, 88, 85, 0.707);
    border-radius: 1rem;
    text-align: center;
    background: rgba(245, 245, 245, 0.449);
    color: var(--tertiary-color);
    font-weight: 900;
    z-index: 2;
}

.showcase__content>a :hover {
    background: rgba(245, 245, 245, 0.449);
    color: var(--primary-color);
}

        <section id="showcase">
            <div class="showcase__content">
                <h1 class="showcase__content--title">Scarlett Tyler</h1>
                <p class="showcase__content--para">
                    UX Designer / Frontend Developer
                </p>
                <a href="#" class="showcase__content--link">My Work</a>
            </div>
        </section>

【讨论】：

【解决方案2】：

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

【讨论】：