css - body :hover apply to? 在哪里

Question

我有一个设计，当用户将鼠标悬停在窗口(body 元素)上时会触发动画，如下所示:

body:hover .block1 {
width: 210px;
transition: width .2s;
}

.block1 有一个 position:absolute 属性，并且在容器内(也是绝对的)。页面上还有另一个 div (.parent)，其位置为:相对。所以有 2 个主要的 div:.container 和 .parent。

当我将鼠标悬停在 body ​​上时，动画开始。但是，当我将鼠标悬停在某些部分上时，比如在 2 个 div 之间或在容器的右边距上，动画会停止 - 因为它不会将其读取为 body 上的“悬停”。它只是在页面周围的一些小空间上，看似随机。这是怎么回事？

Answer 1

当您将鼠标移出 block1 时，动画停止，因为您还没有处于“悬停”状态

这种情况的解决办法只有javascript

 $(".block1").mouseenter(function() {
      $(this).addClass('active')
}).mouseleave(function() {
 // you can enter code here if the mouse out of the .block1
});

CSS

.active {
 width: 210px;
 transition: width .2s;
}