可以做不重叠的阴影吗？

Question

如果你把鼠标放在药丸形状的物体上，它会移动到圆圈上（我想要发生的事情），但是圆圈的阴影仍然可见。 我希望阴影不会相互影响，但仍然是透明的。

＆＃13;

＆＃13;

body {
  background-color: aqua;
}
#circle1, #circle2 {
  position: relative;
  float: left;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  margin-left: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 0;
  background-color: white;
}
#pill1, #pill2 {
  position: relative;
  float: left;
  height: 50px;
  width: 100px;
  border-radius: 25px;
  margin-left: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
  background-color: white;
}
#pill2 {
  box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#circle2 {
  box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
@keyframes animation {
  0% {right: 0px;}
  100% {right: 58px;}
}
#pill1:hover, #pill2:hover {
  animation: animation 0.5s linear forwards;
}

＆＃13;

<div id="circle1"></div>
<div id="pill1"></div>
<div id="circle2"></div>
<div id="pill2"></div>

＆＃13;

＆＃13;

＆＃13;

我忘了提一些东西，它应该是动画片。我把它放在这里作为过渡，但它没有工作。我刚修好它，所以它现在是一个动画。

右边的那个是我想要发生的，但那是最大不透明度。

Answer 1

您可以在circle悬停时移除阴影并使其z-index高于pill以捕捉其悬停状态：

＆＃13;

＆＃13;

body {
  background-color: aqua;
}
#circle {
  position: relative;
  float: left;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  margin-left: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 2;
  background-color: white;
}
#pill {
  position: relative;
  float: left;
  height: 50px;
  width: 100px;
  border-radius: 25px;
  margin-left: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
  background-color: white;
}
#circle:hover + #pill, #pill:hover {
  right: 58px;
}
#circle:hover {
  box-shadow:none;
}
/*Added this to avoid the issue of hovering only the pill and not the circle*/
#circle:hover::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:100px;
}

＆＃13;

<div id="circle"></div>
<div id="pill"></div>

＆＃13;

＆＃13;

＆＃13;

<强>更新

顺便说一句，您可以像这样简化代码：

我还包括过渡

＆＃13;

＆＃13;

body {
  background-color: aqua;
}
#circle {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  margin-left: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
  transition:all 0.5s;
}
#circle:before {
  content:"";
  position: absolute;
  top:0;
  left:80px;
  height: 100%;
  width: 100px;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: white;
  transition:all 0.5s;
}
#circle:hover::before {
  left:0;
}
#circle:hover {
  box-shadow:none;
}
/*Added this to avoid glitchs*/
#circle:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:200px;
}

@keyframes animation {
  0% {left: 80px;}
  100% {left: 0;}
}

＆＃13;

<div id="circle"></div>

＆＃13;

＆＃13;

＆＃13;