光标移动时悬停过渡行为不端答案

【问题标题】：Hover transition misbehaves on movement of cursor光标移动时悬停过渡行为不端
【发布时间】：2020-05-01 04:44:14
【问题描述】：

我正在尝试使用悬停过渡来移动元素。我所期望的是当鼠标悬停在元素上时，转换将触发。当鼠标离开元素时，它会转回来。但是发生的事情是，它不是悬停，而是像鼠标悬停一样。这意味着，即使在元素内，如果我移动光标，转换也会触发。我的代码是：

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

为什么会这样？

【问题讨论】：

标签： css css-transitions

【解决方案1】：

为什么会这样？

因为当您将.info 置于其上方时，您不再悬停.img。

要么在.info 上使用pointer-events: none，要么如果这是不可能的（因为用户也需要与那个元素交互），然后通过 :hover 在父容器上处理这个- .wrapper:hover .info { … }

【讨论】：

【解决方案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>

【讨论】：