尝试在绝对定位元素下方的元素上使用悬停

Question

所以我尝试在两个元素上使用悬停效果。其中一个元素具有绝对位置，该元素悬停后需要重新着色背景。这似乎可行，但是我无法使背面图像相应地缩放。我认为这与第一个 div 的绝对定位有关。但我找不到解决这个问题的方法。我一直在尝试使用 pointer-event 修复它，但我无法做到这一点。

<style>
  .master {
    width: 1200px;
    overflow: hidden;
    position: relative;
  }
  
  img {
    width: 100%;
  }
  
  img:hover {
    transform: scale(1.2)
  }
  
  .hover {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  .hover:hover {
    background: rgba(255, 0, 0, 0.5);
  }
</style>

<div class="master">
  <div class="hover">

  </div>
  <img src="http://via.placeholder.com/1200x350" alt="">
</div>

这是我现在得到的代码

Answer 1

您没有在图像上获得悬停事件是正确的，因为绝对定位的 <div> 覆盖了它。但是由于 <img> 元素紧跟在 HTML 层次结构中的 <div> 元素之后，您可以使用 Adjacent Sibling Combinator 来定位它。

<style>
  .master {
    width: 1200px;
    overflow: hidden;
    position: relative;
  }
  
  img {
    width: 100%;
  }
  
  .hover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
  }
  
  .hover:hover {
    background: rgba(255, 0, 0, 0.5);
  }

  .hover:hover + img {
    transform: scale(1.2)
  }
</style>

<div class="master">
  <div class="hover">

  </div>
  <img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 2

您不能同时在两个堆叠元素上获得悬停效果。但是，如果您希望能够将后面的元素悬停在另一个元素之后，您可以在前景中的元素上使用pointer-events: none;，允许鼠标操作“通过它”，因此影响后面的元素：

<style>
  .master {
    width: 1200px;
    overflow: hidden;
    position: relative;
  }
  
  img {
    width: 100%;
  }
  
  img:hover {
    transform: scale(1.2)
  }
  
  .hover {
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events: none;
  }
  
  .hover:hover {
    background: rgba(255, 0, 0, 0.5);
  }
</style>

<div class="master">
  <div class="hover">

  </div>
  <img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 3

我发现将悬停效果移动到 .master 而不是单独的元素似乎有效。

    <style>
    .master {
        width: 1200px;
        overflow: hidden;
        position: relative;
    }
    img {
        width: 100%;
        z-index: 50;
    }

    .master:hover img{
        transform: scale(1.2)
    }

    .hover {
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: 0.8;
        z-index: 100;
    }

    .master:hover .hover {
        background: rgba(255,0,0, 0.5);
    }
</style>

<div class="master">
    <div class="hover">
        test
    </div>
    <img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 4

悬停和绝对位置没有问题

您的问题是 img 标签位于 .hover 的顶部，这是绝对位置的原因。

所以你的悬停 div 在你的图像后面，鼠标悬停在图像标签上。

希望对您有所帮助

Answer 5

您需要将 :hover 设置为具有 class 的绝对元素 .hover:

.hover:hover + img {
    transform: scale(1.2);
}

此外，为没有 :hover 的相同 class 设置 z-index。

此外，我还为 transform 和 background 添加了转换。

.master {
    width: 1200px;
    overflow: hidden;
    position: relative;
    display: inline-flex;
}

.hover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 9999;
    transition: background .5s;
}

img {
    width: 100%;
    transition: transform .5s;
}

.hover:hover + img {
    transform: scale(1.2);
}

.hover:hover {
    background: rgba(255, 0, 0, 0.5);
}

<div class="master">
  <div class="hover"></div>
  <img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 6

您可以将 pointers-event: none; 添加到 img 并且您的指针将忽略该图像，但这只是为了防止您以后没有任何计划在图像上添加一些鼠标操作

尝试在绝对定位元素下方的元素上使用悬停

Trying to use hover on a element below an absolute positioned element

html

css

hover