body:hover 适用于哪里？答案

【问题标题】：Where does body:hover apply to?body:hover 适用于哪里？
【发布时间】：2013-07-20 04:47:51
【问题描述】：

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

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

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

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

【问题讨论】：

你能发个小提琴吗？
鼠标离开悬停时是否要保持悬停的属性？
这里是一个代码示例：dabblet.com/gist/6048160 请注意 .container div 下方和 .parent div 上方如何不触发动画。我已经将 body margins 和 padding 设置为 0。

标签： css html hover transition

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

【讨论】：

我忘了在帖子中提到这必须是纯 css。实际上，我现在注意到动画仅在我将鼠标悬停在实际 div 上时才有效（起初我没有注意到，因为它们很大，所以它们覆盖了很多页面）。
'body:hover' 是个坏主意，因为所有页面都是 body 它总是会悬停，如果你想要特定的 div 使用 .block1:hover{} （注意悬停不起作用在 ie6 上，但现在没有人关心 internet-explorer 6

【解决方案2】：

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

【讨论】：