我有以下情况:一个div,其中带有条形图(具有一定高度的div)以显示图表。
在带有条形图的主div顶部,放置了一个蒙版图像,因此您可以看到图形而不是条形图。 (我有一个男人和一个女人来显示统计信息,例如,请参见所附图片)。

条形图附加到mousemove事件,以在工具提示中显示有关条形图的信息。

如果我将鼠标悬停在这些条上,我的鼠标移动不会显示,因为图像将其阻挡了。
是否可以将鼠标悬停在图像上,并且将mousemove事件绑定到条形以获得我想要的信息?最终结果是显示工具提示以及条形图上的信息。

最佳答案

您可以在图像上方添加一些div,并将其用于悬停。但这可能会有点混乱。

或者,您可以制作一个具有四个区域的HTML图像地图,每个区域都具有onmouseover属性,这会更清洁:

<MAP NAME="mymap">
    <AREA SHAPE="RECT" COORDS="0, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar1')" NAME="bar1">
    <AREA SHAPE="RECT" COORDS="100, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar2')" NAME="bar2">
    <AREA SHAPE="RECT" COORDS="200, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar3')" NAME="bar3">
    <AREA SHAPE="RECT" COORDS="300, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar4')" NAME="bar4">
</MAP>
<IMG SRC="mybarmask.png" USEMAP="#mymap" />


这里的坐标很可能是错误的,我不在计算机上,所以无法对其进行测试...

关于javascript - 将鼠标移到图像下的div上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5438487/

10-12 12:30
查看更多