身体在哪里：悬停适用于？

Question

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

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

.block1有一个position：absolute属性，位于容器内（也是绝对的）。页面上还有一个div（.parent），其位置为：relative。所以有两个主要的div：.container和.parent。

当我将鼠标悬停在身体​​上时，动画开始播放。但是，当我将鼠标悬停在某些部分上时，例如在两个div之间或容器的右边缘之间时，动画会停止 - 因为它不会将其视为身体上的“悬停”。它只在页面周围的一些小空间内，看似随意。这是怎么回事？

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;
}

Answer 2

将动画应用于所有不能工作的元素＆＃34;逐个使用或使用*选择器。