Есть ли способ добавить задержку «охлаждения» или требовать ввода данных пользователем перед повторением перехода? - PullRequest
Новая
       24

Есть ли способ добавить задержку «охлаждения» или требовать ввода данных пользователем перед повторением перехода?

0 голосов
/ 07 сентября 2018

При использовании CSS можно получить неожиданный результат при кодировании изображения или рамки для перемещения при наведении курсора. Если мышь находится в положении, которое находится в области щелчка в начале перехода, но не в конце, эффект перехода будет повторяться бесконечно и заикаться, если нет задержки. Ниже приведена краткая демонстрация html / css проблемы: 

div {

  height:			200px;
  width:			200px;
  background-color:	red;

}

div:hover {

  margin-left:		100px;

}
<!doctype html> <html> 

<head> <title> Hover / Transition Demo </title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head> 

<body>

<div> </div>

</body> 

</html>

Чтобы воспроизвести проблему, наведите указатель мыши на левую сторону красной рамки, это должно привести к быстрому перемещению квадрата влево и вправо.

Есть ли чистый способ обойти это бельмо на глазу? Возможны несколько решений: коробка остается в исходном положении; или конечная позиция; есть задержка, которая применяется только в этой ситуации, чтобы избежать эффекта заикания; или мышь требуется переместить по крайней мере на один пиксель, прежде чем переход повторяется. В идеале я хотел бы, чтобы все эти решения, но одно было бы здорово! Заранее спасибо.

1 Ответ

0 голосов
/ 07 сентября 2018

Это не идеальное решение, но оно демонстрирует то, что я пытался передать в своем комментарии. Состояние наведения на родительском элементе красной рамки. Тот факт, что вы можете перетащить курсор на красное поле, показывает, что наведение на красное поле все еще вызывает эффект наведения. Это потому, что отрицательное поле увеличивает ширину .wrapper, но это основная концепция. Если вам нужно более подробное решение, вам нужно будет предоставить больше информации о конкретном случае, над которым вы работаете, а не об этой простой демонстрации.

Редактировать: Я обновил код для использования pointer-events:none. Он лучше поддерживается , чем я думал (IE 11+). Это правило CSS, которое указывает браузеру игнорировать события мыши (в данном случае: hover), исходящие от элемента с правилом стиля. 

.wrapper {
  height:			200px;
  width:			200px;
}

.box {

  height:			200px;
  width:			200px;
  background-color:	red;
  pointer-events: none;

}

.wrapper:hover .box {

  margin-left:		100px;

}
<!doctype html> <html> 

<head> <title> Hover / Transition Demo </title> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"></head> 

<body>

<div class="wrapper">
<div class="box"> </div>
</div>

</body> 

</html>
...