Hover переход ведет себя плохо при движении курсора - PullRequest
Новая
       8

Hover переход ведет себя плохо при движении курсора

2 голосов
/ 29 апреля 2020

Я пытаюсь переместить элемент, используя переход при наведении. То, что я ожидал, когда мышь при наведении на элемент, переход будет срабатывать. Когда мышь покидает элемент, она вернется обратно. Но то, что происходит, вместо того, чтобы парить, ведет себя как наведение мыши. Это означает, что даже внутри элемента, если я перемещаю курсор, происходит переход. Мой код: 

.wrapper {
  height: 150px;
  overflow: hidden;
  display: flex;
  width: 150px;
  flex-wrap: wrap;
}

.img {
  width: 100%;
  height: 150px;
  background-color: tomato;
  color: black;
}

.info {
  height: 150px;
  width: 100%;
  background-color: skyblue;
  transform: translateY(0);
  transition: all 1s;
}

.img:hover~.info {
  transform: translateY(-150px);
}
<div class="wrapper">
  <div class="img">This is IMG</div>
  <div class="info">This is info</div>
</div>

Почему это так?

Ответы [ 2 ]

4 голосов
/ 29 апреля 2020

Почему он ведет себя так?

Потому что вы не больше зависаете .img, когда вы ставите .info выше it.

Либо используйте pointer-events: none на .info, либо, если это невозможно (поскольку пользователю необходимо также взаимодействовать с этим элементом), затем обработайте это с помощью : наведите курсор на родительский контейнер - .wrapper:hover .info { … }

0 голосов
/ 29 апреля 2020

Используйте hover для обоих .img и .info, поэтому, когда один из них присутствует, вы можете остаться в нужной вам ситуации. когда уйдете, тогда .info вернется go. 

.wrapper{
            height:150px;
            overflow: hidden;
            display:flex;
            width:150px;
            flex-wrap: wrap;
        }
        .img{
            width:100%;
            height:150px;
            background-color: tomato;
            color:black;
        }
        .info{
            height:150px;
            width:100%;
            background-color: skyblue;
            transform: translateY(0);
            transition: all 1s;
        }
        .img:hover ~ .info, .info:hover{
            transform: translateY(-150px);
        }
<div class="wrapper">
        <div class="img">This is IMG</div>
        <div class="info">This is info</div>
    </div>
...