pseudo-class ::after 在我的 div 上不起作用

Question

我试图在悬停 div 时给 div 元素伪 class ::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">

Answer 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>

pseudo-class ::after 在我的 div 上不起作用

pseudo-class ::after doesn't work on my div

html

css

pseudo-class