当下一个元素处于相对位置时，float元素上的mouseover不会触发

Question

我遇到了浮动元素未触发的鼠标悬停事件的问题，因为下一个元素有一个position: relative;！

以下是演示：http://jsfiddle.net/7UjQZ/

实际上，带有position: relative的元素似乎会遍历浮动元素并捕获鼠标悬停事件。当我删除position: relative时，不再有问题！除非我绝对需要这个属性，因为在我最初的问题中我有宽度绝对位置内的元素。

你知道吗？一个解决方案？

谢谢！

Answer 1

Working DEMO

这是z-index问题：

更新CSS以使z-index的{​​{1}}更高：

.float

Answer 2

我建议阅读relative positioning。

看看我们在代码中使用相对位置时会发生什么。我添加了背景以获得更好的体验。

.text {
    background-color: #ebebeb;
    position: relative;
}

http://jsfiddle.net/7UjQZ/2/