javascript - 当下一个元素处于相对位置时， float 元素上的鼠标悬停不会触发

Question

我遇到了一个问题，鼠标悬停事件没有在 float 元素上触发，因为下一个元素有一个 position: relative; !

这是一个演示:http://jsfiddle.net/7UjQZ/

确实，带有 position: relative 的元素似乎越过了 float 元素并捕获了鼠标悬停事件。当我删除 position: relative 时，不再有问题了!除非我绝对必须使用此属性，因为在我最初的问题中，我的元素在宽度绝对位置内。

你有什么想法吗？解决方案？

谢谢!

Answer 1

Working DEMO

这是一个 z-index 问题:

为 .float 更新您的 CSS 以获得更高的 z-index:

.float
{
    float: left;
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position:relative;
    z-index:10;
}