在悬停时在伪元素之前更改答案

【问题标题】：changing before pseudo element on hover在悬停时在伪元素之前更改
【发布时间】：2019-07-31 09:16:14
【问题描述】：

所以在网上阅读之后，我设法在图像上创建了一个嵌入阴影..

它可以工作，但我无法在 :hover 上改变它。

目前我有：

.shadow {
  position: relative;
  max-width: 100%;
  float: left;
}

.shadow::before {
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6);
  transition: box-shadow .2s ease-in-out;
}

.shadow:hover:before {
  box-shadow: inset 5px 5px 55px rbga(0, 0, 0, .8);
}

.shadow img {
  float: left;
  border-radius: 100%;
  width: 300px;
}

<div class="shadow">
  <img src="https://picsum.photos/300/300?image=1015">
</div>

我已经把代码放在这里了：https://codepen.io/anon/pen/rRwGmV

我希望你们中的一些人知道如何做到这一点。

谢谢

【问题讨论】：

错字问题rbga
是的，我现在看到了
哈哈，谢谢.. 多么愚蠢，我已经多次查看 css 了。

标签： html css hover transition box-shadow

【解决方案1】：

.shadow {
	position: relative;
	max-width: 100%;
	float: left;
	}
    
    .shadow::before {
        border-radius: 100%;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: inset 3px 3px 8px red;
        transition: box-shadow .2s ease-in-out;
	   }

.shadow:hover::before {
    box-shadow: inset 5px 5px 55px green;
}
	   
.shadow img {
	  float: left;
    border-radius: 100%;
    width: 300px;
	}

<div class="shadow">
  <img src="https://picsum.photos/300/300?image=1015">
</div>

【讨论】：

由于拼写错误，问题已解决，但我给了你答案，因为你的答案是最接近它应该做的。这可能会帮助其他需要这个的人:)
是的，我稍后检查过

【解决方案2】：

如果没有:before，你会怎么想？

.shadow img{
  border-radius: 50%;
  box-shadow: 3px 3px 8px rgba(0,0,0,.6);
}

img:hover {
      box-shadow: 5px 5px 5px red;
}

    <div class="shadow">
    <img src="https://picsum.photos/300/300?image=1015">
  </div>

Here is my codepen whith this code

我忘了做某事吗？我该如何改进？

【讨论】：