将鼠标悬停在另一个元素下方

Question

我正在尝试找到一种方法来在另一个元素下面的元素上注册鼠标悬停事件。我有行，当鼠标悬停时，会出现一个新的div并将其放置在悬停的div的顶部。

以下是页面：http://www.brunobryan.com/dev/stephanebourgeois/index/

当您将鼠标悬停在一行上时，右侧会显示一个图像。我想在行上注册鼠标悬停事件，即使鼠标悬停在图像上方。

Answer 1

这实际上是不可能的，您有几种解决方法可供选择。

a）在包含行和图像的容器上注册悬停事件。

或

b）在图像上绑定相同的悬停事件。

Answer 2

您可以使用pointer-events允许光标传递图像：

#index-hover {
    pointer-events: none
}

注意，所有浏览器中都有此isn't supported。如果您使用SVG，可以提供更好的支持。

Answer 3

我认为这里的答案是，您的<img>标记需要放在<tr>标记内，然后绝对定位。您可能希望将行相对定位，以便可以将行的位置用作上下文。