Переход не стреляет при наведении - PullRequest
Новая
       16

Переход не стреляет при наведении

1 голос
/ 01 апреля 2019

Я пытаюсь реализовать скользящую боковую панель, которая активируется, когда пользователь наводит курсор на элемент .sb-toggle.При наведении на него боковая панель, расположенная рядом с видом, будет скользить за 10 ems, а также сдвиг .content div вправо.Но я не могу заставить его работать должным образом.Переходы запускаются для элементов .sb-toggle и .content, но боковая панель не отображается. 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.navbar {
  z-index: 1;
  position: fixed;
  top: 0%;
  background-color: #333;
  height: 3em;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid grey;
}

.sidebar {
  background-color: #404040;
  width: 10em;
  height: 100%;
  position: fixed;
  margin-left: -10em;
  top: 3em;
  bottom: 0;
  -moz-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease-in-out;
}

.sb-toggle {
  background-color: #404040;
  width: 1.5em;
  height: 100%;
  position: fixed;
  top: 3em;
  left: 0;
  -moz-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease-in-out;
}

.content {
  margin-top: 3em;
  margin-left: 10em;
  height: inherit;
  width: inherit;
  transition: margin-left 0.5s ease-in-out;
}

.sb-toggle:hover {
  margin-left: 10em;
}

.sb-toggle:hover ~ .sidebar {
  margin-left: 0;
}

.sb-toggle:hover ~ .content {
  margin-left: 20em;
}

Редактировать: Вот HTML: 

<body>
    <div class="navbar"></div>
    <div class="sidebar"></div>
    <div class="sb-toggle"></div>
    <div class="content"></div>
  </body>

Ответы [ 3 ]

1 голос
/ 01 апреля 2019

Поместите .sb-toggle div в .sidebar и измените :hover с .sb-toggle на .sidebar.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.navbar {
  z-index: 1;
  position: fixed;
  top: 0%;
  background-color: #333;
  height: 3em;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid grey;
}

.sidebar {
  background-color: #404040;
  width: 10em;
  height: 100%;
  position: fixed;
  margin-left: -10em;
  top: 3em;
  bottom: 0;
  -moz-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease-in-out;
}

.sb-toggle {
  background-color: #404040;
  width: 1.5em;
  height: 100%;
  position: fixed;
  top: 3em;
  left: 0;
  -moz-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease-in-out;
}

.content {
  margin-top: 3em;
  margin-left: 10em;
  height: inherit;
  width: inherit;
  transition: margin-left 0.5s ease-in-out;
}

.sb-toggle:hover {
  margin-left: 10em;
}

.sidebar:hover {
  margin-left: 0;
}

.sidebar:hover ~ .content {
  margin-left: 20em;
}
<body>
    <div class="navbar"></div>
    <div class="sidebar">
     <div class="sb-toggle"></div>
    </div>
   
    <div class="content"></div>
  </body>
0 голосов
/ 01 апреля 2019

Селектор брата ~ только смотрит вперед в DOM, а не назад. следовательно, строка .sb-toggle ~ .sidebar никогда не будет выполнена.

Из документов MDN:

"Комбинатор ~ выбирает братьев и сестер. Это означает, что второй элемент следует за первым (хотя и не обязательно сразу), и оба имеют одного и того же родителя."

Сделал небольшую демонстрацию, чтобы показать упомянутое поведение: https://codepen.io/anon/pen/jREMmb

Вы должны либо поменять порядок узлов DOM, либо найти другой маршрут для запуска перехода

0 голосов
/ 01 апреля 2019

Вам необходимо явно указать начальную и конечную точки.

Например: 

.sb-toggle {
  /* other stuff */
  margin-left: 0; /* <-- You need to add this */
  -moz-transition: margin-left 0.5s ease;
  transition: margin-left 0.5s ease-in-out;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...