Три деления, которые каждый go друг над другом, когда парил, но средний перехватывает при переходе - PullRequest
Новая
       23

Три деления, которые каждый go друг над другом, когда парил, но средний перехватывает при переходе

0 голосов
/ 09 февраля 2020

Пожалуйста, посмотрите это jsfiddle, чтобы увидеть мою проблему: https://jsfiddle.net/4e3sa9uL/

Когда я наведу левую и правую квадраты, они переходят правильно. Однако, когда я наведу среднюю часть, она «привязывается» к двум другим в процессе, и я не могу понять, почему. 

#picturegroupbox {
  position: absolute;
  top: 4px;
  left: -83px;
  background-color: #22;
  border: px solid #000;
  cursor: url(http://www.cursor.cc/cursor/870/46/cursor.png), progress !important;
  height: 728px;
  z-index: 7;
  font-size: 12px;
  width: 916px;
  -webkit-user-select: none;
  overflow: auto;
}

.picture {
  position: absolute;
  top: 0px;
  left: 305px;
  width: 306px;
  height: 728px;
  background-color: #222;
  background-size: 651px;
  border: px solid #fff;
  background-repeat: none;
  cursor: url(http://www.cursor.cc/cursor/870/46/cursor.png), progress !important;
  -webkit-user-select: none;
  background-repeat: no-repeat;
  -webkit-transition: all 1s ease;
  background-position: 45% 50%;
  z-index: 5;
}

.picture:hover {
  background-size: 916px;
  background-repeat: no-repeat;
  width: 916px;
  left: 0;
  z-index: 10;
  height: 800px;
}

.pictureleft {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 305px;
  height: 728px;
  background-color: #333;
  background-size: 650px;
  border: px solid #fff;
  background-repeat: none;
  cursor: url(http://www.cursor.cc/cursor/870/46/cursor.png), progress !important;
  -webkit-user-select: none;
  background-repeat: no-repeat;
  background-position: 20% 0%;
  -webkit-transition: all 1s ease;
  z-index: 5;
}

.pictureleft:hover {
  background-size: 916px;
  background-repeat: no-repeat;
  width: 916px;
  left: 0;
  z-index: 10;
  height: 800px;
}

.pictureright {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 305px;
  height: 728px;
  background-color: #666;
  background-size: 750px;
  border: px solid #fff;
  background-repeat: none;
  cursor: url(http://www.cursor.cc/cursor/870/46/cursor.png), progress !important;
  -webkit-user-select: none;
  background-repeat: no-repeat;
  background-position: 90% 0%;
  -webkit-transition: all 1s ease;
  z-index: 5;
}

.pictureright:hover {
  background-color: #444;
  background-size: 916px;
  background-repeat: no-repeat;
  width: 916px;
  right: 0;
  z-index: 10;
  height: 800px;
}
<div id="picturegroupbox">
  <div class="picture">&nbsp;</div>
  <div class="pictureleft">&nbsp;</div>
  <div class="pictureright">&nbsp;</div>
</div>

Engli sh не мой родной язык и не кодирует / css в долгосрочной перспективе, так что не будьте слишком злыми, спасибо

...