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

Question

我在浮动元素上没有触发鼠标悬停事件有问题，因为下一个元素有position: relative;！

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

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

你有什么主意吗？一个解法？

谢谢！

Answer 1

工作演示

这是一个z-index问题：

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

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

Answer 2

我建议阅读有关相对定位的内容。

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

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

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