Javascript 鼠标移动到图像下的div上_Javascript_Mousemove

Javascript 鼠标移动到图像下的div上

javascript

Javascript 鼠标移动到图像下的div上,javascript,mousemove,Javascript,Mousemove,我对以下情况有一个简单的描述：一个div，其中有条带（具有一定高度的div）以显示图表。在带有条形图的主div的顶部，放置了一个带有遮罩的图像，这样您就可以看到图形而不是条形图。（我有一个男人和一个女人来显示统计数据，例如，见附图）这些条将附加到mousemove事件，以在工具提示中显示有关这些条的信息如果我将鼠标悬停在这些条上，我的mousemove不会显示，因为图像正在阻止它。是否可以将鼠标悬停在图像上，并将mousemove事件绑定到条上以获取我想要的信息？最终结果是显示工具提示，

我对以下情况有一个简单的描述：一个div，其中有条带（具有一定高度的div）以显示图表。在带有条形图的主div的顶部，放置了一个带有遮罩的图像，这样您就可以看到图形而不是条形图。（我有一个男人和一个女人来显示统计数据，例如，见附图）

这些条将附加到mousemove事件，以在工具提示中显示有关这些条的信息

如果我将鼠标悬停在这些条上，我的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" />

这里的坐标很可能是错误的，我不在我的计算机上，所以我无法测试它…

您可以在图像顶部添加一些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" />

这里的坐标很可能是错误的，我不在我的计算机上，所以我无法测试它…

mouseenter和mouseleave甚至可以通过其他元素工作。

以下是我解决此问题的方法：

对于这些图形中的每一个，我都会有两个图像，一个是内部空白的，因此只有图形的边框，另一个是从上到下完全着色的（橙色）

然后你可以有这样的东西：

<div class="empty">
    <div class="full">&nbsp;</div>
</div>

.empty

的空图像为

背景

，具有适当的高度和宽度以及

位置：相对

.full

具有彩色全彩图像，调整了

高度

，但固定了宽度和

位置：绝对；底部：0；左=0

然后将鼠标悬停在

.empty

或

.full

上，您可以做任何您想做的事情