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 px （边框为5px，间隙为5px）然后添加框阴影并且您还需要现在在伪元素上添加转换而不是元素本身

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>

Answer 2

我不这么认为你可以这样做，但是可以使用伪元素

例如

div:after {
  content: "";
  bottom: -10px;
  top: -10px;
  left: -10px;
  right: -10px;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s;
}

div:hover:after {
  box-shadow: 0 0 0 5px green;
}

＆＃13;

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:after {
  content: "";
  bottom: -10px;
  top: -10px;
  left: -10px;
  right: -10px;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s;
}

div:hover:after {
  box-shadow: 0 0 0 5px green;
}

＆＃13;

<div></div>

＆＃13;

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

2 个答案: