javascript - 如何在悬停时使内部框阴影透明

Question

我想让悬停时出现的黑色环变得透明。但是当我将 box-shadow: 0 0 0 5px #000, 0 0 0 10px green 更改为 box-shadow: 0 0 0 5px transparent, 0 0 0 10px green它没有出现。我如何实现它？

html { 
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  transition: 0.3s;
  border: 5px solid #fff;
}
div:hover{
  box-shadow: 0 0 0 5px #000, 0 0 0 10px green;
}

<div></div>

Answer 1

只需添加一个伪元素使用绝对位置并将其扩展 10 像素(边框为 5 像素，间隙为 5 像素)，然后添加框阴影 而且你现在还需要在伪元素上添加过渡而不是元素本身

html { 
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  border: 5px solid #fff;
}
div:after{
  position:absolute;
  border-radius: 50%;
  content:"";
  z-index:-1;/* depends on your need change to 1 if want to overlap the div on hover*/
  top:-10px;
  bottom:-10px;
  left:-10px;
  right:-10px;
  transition:all 0.3s;
}
div:hover:after{
  box-shadow:0 0 0 5px green;
}

<div></div>