时间戳

首页 > 解决方案 > CSS :hover on button 在已经悬停的 div 中不起作用

css - CSS :hover on button 在已经悬停的 div 中不起作用

问题描述

当我悬停图像本身时，我有一个 div 出现在图像顶部。div 包含两个 div（按钮），它们也有一个 :hover 来改变它们的颜色并将光标设置为指针。

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

此外，似乎悬停在 btn_container 将出现的底部的图像上不会触发第一个 :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 上，则悬停按钮似乎可以工作：

在此处输入图像描述

标签： csssasshover

解决方案

我尝试使用 opacity 而不是 display 来切换 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;
  }

您当前的代码可能存在一些问题，如果显示最初设置为 none，img div 具有更高的堆栈顺序，但是我不确定，所以如果有人知道我想知道为什么这是情况也是如此。

推荐阅读