伪类 ::after 不适用于我的 div [重复]答案

【问题标题】：pseudo-class ::after doesn't work on my div [duplicate]伪类 ::after 不适用于我的 div [重复]
【发布时间】：2022-01-02 01:09:20
【问题描述】：

当我悬停 div 时，我试图为 div 元素提供伪类 ::after。但它不起作用。

当我遵循答案时它会起作用然后我在img元素上试了一下，还是不行

有什么办法吗？

.div {
  margin: auto;
  max-width: 5.2rem;
  height: 5rem;
  border-radius: .75rem;
  margin-top: .75rem;
  position: relative;
  background: red;
}

.div:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  z-index: 7;
  border: 2px solid orange;
}


<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

<img src="" alt="" class="div">
  <img src="" alt="" class="div">
  <img src="" alt="" class="div">
  <img src="" alt="" class="div">

【问题讨论】：

正如@curveball 提到的，您可以尝试.div:hover:after 或像.div:after:hover 那样切换顺序。在过去，我遇到了同样的问题，并且通过切换顺序起作用。
试试这个question的答案

标签： html css pseudo-class

【解决方案1】：

选择器.div:hover .div 匹配.div 内的.div。你要的是选择器.div:hover::after：

.div {
  margin: auto;
  max-width: 5.2rem;
  height: 5rem;
  border-radius: .75rem;
  margin-top: .75rem;
  position: relative;
  background: red;
}

.div:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  z-index: 7;
  border: 2px solid orange;
}

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

【讨论】：

它可以工作，但是当我用 img 元素更改 div 元素时它不起作用