在移动光标时，悬停过渡会出现错误。

Question

我正在尝试使用悬停过渡来移动一个元素。我所期望的是当鼠标悬停在元素上时，过渡会启动。当鼠标离开该元素时，它将返回过渡。但现在发生的情况是，它的行为不像hover，而是像mouseover。这意味着，即使在元素中，如果我移动我的光标，过渡就会启动。我的代码是

.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>

为什么会出现这种情况？

Answer 1

为什么会有这样的行为？

因为你是 不 悬停 .img 再怎么说，当你把 .info 以上 它。

要么使用 pointer-events: none 关于 .info，或者如果这是不可能的（因为用户需要与 该 元素)，然后通过:hover在父容器上进行处理--------。.wrapper:hover .info { … }

Answer 2

对.img &.info都使用悬停，所以当其中一个出现时，你可以停留在你想要的情况下。当离开时，刚好.info会回去。

.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>