Question

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

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

如果我将鼠标悬停在栏杆上，我的鼠标移动不显示，因为图像阻挡了它。是否可以将鼠标悬停在图像上，并且仍然将鼠标移动事件绑定到条形图以获取我想要的信息？最终结果是显示工具提示，其中包含条形图中的信息。

enter image description here

Answer 1

您可以在图像上添加一些额外的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" />

这里的坐标很可能是错的，我不在电脑上，所以我无法测试......

Answer 2

假设您的宽度相等，则需要：

查找容器的偏移量：

var DOMOffset = function(el) {
    var curleft, curtop;
    curleft = curtop = 0;
    if (el.offsetParent) {
        do {
            curleft += el.offsetLeft;
        curtop += el.offsetTop;
    } while (el = el.offsetParent);
    }
    return [curleft,curtop];
}

将您想要处理的所有事件附加到图像侦听器，并将它们绑定到将它们委派给正确DOM元素的函数。像Math.floor((event.clientX - container_offset_X) / count_of_your_bar * width_of_your_bar)这样的东西应该给你正确的bar元素的从零开始的索引。可以使用以下代码的修改来完成委派本身：
```
quickDelegate = function(event, target) {
    var eventCopy = document.createEvent("MouseEvents");
    eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
    target.dispatchEvent(eventCopy);
};
```
其中event是您的图片捕获的原始事件，target是您检测到的bar DOM元素。

请注意我之前写过这个代表团功能，而我只针对Firefox和Chrome。你可能需要修改一些东西才能使IE工作。

Answer 3

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

Answer 4

这是我解决这个问题的方法（解决方案）：

对于这些图中的每一个，我会有两个图像，一个是空白的，所以只是图的边框，一个是从上到下完全着色（橙色）。

那么你可能会有这样的事情：

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

.empty的空图像为background，其高度和宽度均为position:relative。 .full的彩色全彩色图片具有经过调整的height但固定宽度和position:absolute; bottom: 0; left=0。

然后在.empty或.full上进行鼠标悬停，您可以随心所欲地执行任何操作

mousemove在图像下方的div上

4 个答案: