css - body:hover 适用于哪里？

Question

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

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

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

当我将鼠标悬停在身体​​上时，动画开始。但是，当我将鼠标悬停在某些部分上时，例如在 2 个 div 之间或容器的右边距上时，动画会停止 - 因为它不会将其读作身体上的“悬停”。它仅在页面周围的一些小空间上，看似随机。这里发生了什么？

Answer 1

当您将鼠标从块 1 移出时，动画停止，因为您已经不在“悬停”状态

这种情况的解决方案只有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;
}

Answer 2

将动画一一应用于所有“不起作用”的元素或使用*选择器。