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

由于某些原因，我只能通过增加按钮上的z索引来使用它。我将遵循建议并查看开发工具中的违规行。对不起，我应该发布所有代码。现在需要咖啡。

Answer 2

我遇到了同样的问题，我不知道这样做是否正确，但是增加锚标记 (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>

悬停不在div内的<button>上工作，在外面工作

2 个答案: