Question

当我将鼠标悬停在图像本身上时，会在图像上方显示一个div。 div包含两个div（按钮），它们还有一个：hover，可更改其颜色并将光标设置为指针。

问题在于按钮上的悬停不会触发悬停。

此外，似乎在btn_container出现的底部的图像上悬停不会触发first：hover，也不会使btn_container出现。

//HTML
 <div class="container">
  <img src="src">
  <div class="btn_container">
    <div class=" btn">
      <p>Select</p>
    </div>
    <div class="btn">
      <p>Preview</p>
    </div>
  </div>
      
//SCSS
.container {
  position: relative;
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }

  .btn_container {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    display: none;
    position: absolute;
  }
  img:hover + .btn_container,
  .btn_container > * {
    display: flex;
    border: none;
    text-align: center;
    justify-content: space-around;
  }

  .btn {
    padding: 6px 12px;
    height: 14px;
    background: var(--yellow-medium);
    border-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--white);
    font-family: roboto;
    &:hover {
      cursor: pointer;
      background: var(--red);
      color: var(--white);
    }
  }
}

预览，按钮悬停不起作用：

如果我使用检查器将鼠标悬停在img上，则按钮悬停似乎有效：

Answer 1

问题出在类img:hover + .btn_container和.btn_container > *中。

这是更新的scss：

.container {
  position: relative;
  width: 100%;

  img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
  }

  &:hover .btn_container {
    display: flex;
  }

  .btn_container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: var(--dark-purple-trans);
    border: none;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 14px;
    padding: 6px 12px;
    color: var(--white);
    font-family: roboto;
    background-color: var(--yellow-medium);
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      color: var(--white);
      background-color: var(--red);
    }
  }
}

您可以在此处查看其运行情况：Codepen

Answer 2

我尝试使用不透明度而不是显示来切换btn_container的可见性，并在btn_container上添加了一个悬浮鼠标，它似乎可以正常工作：https://jsfiddle.net/pr8dxe2g/1/

  .btn_container {
    width: 500px;
    height: 100px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    opacity: 0;
    position: absolute;
  }

  img:hover + .btn_container,
  .btn_container:hover,
  .btn_container > * {
    display: flex;
    opacity: 1;
    border: 1px solid blue;
    text-align: center;
    justify-content: space-around;
  }

您的当前代码可能存在一些问题，即如果最初将显示设置为无，则img div的堆栈顺序较高，但是我不确定是否有人知道我想知道为什么情况也是这样。

CSS：按钮上的悬停按钮在已悬停的div中不起作用

2 个答案: