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

Posted 2023-05-08

【中文标题】CSS :hover on button 在已经悬停的 div 中不起作用

【英文标题】：CSS :hover on button not working within already hovered div

【发布时间】：2020-10-10 16:07:27

【问题描述】：

当我将图像本身悬停时，图像顶部会出现一个 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 上，则悬停按钮似乎可以工作：

【参考方案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

【讨论】：

这个有效。通过将 :hover 直接附加到容器而不是 img 来解决问题。

【参考方案2】：

我尝试使用 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 具有更高的堆栈顺序，但是我不确定，所以如果有人知道，我想知道为什么情况也是如此。