Можно ли делать тени без перекрытия?

Если вы наведете указатель мыши на предмет в форме таблетки, он будет перемещаться по кругу (что я хочу, чтобы произошло), но тень круга останется видимой. Я хочу, чтобы тени не влияли друг на друга, но оставались прозрачными.

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;
}

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

Я кое-что забыл упомянуть, это должна быть анимация. Я поместил это здесь как переход, но он не работал. Я только что исправил это, теперь это анимация.

Справа - это то, что я хочу сделать, но это максимальная непрозрачность.

Я обновил свой ответ, кстати, анимация не нужна, так как вы можете использовать переход;)

— 10.05.2018 01:21

css box-shadow

10.05.2018 00:47

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете удалить тень при наведении курсора на circle и сделать его z-index выше, чем у pill, чтобы уловить его состояние при наведении:

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;
}

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

ОБНОВИТЬ

Кстати, вы можете упростить свой код следующим образом:

Я также включил переход

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;}
}