在拉斐尔地图上触发鼠标悬停事件

Question

我是第一次使用 Raphael 插件，到目前为止我成功地创建了一张德国地图并勾勒出内部所有不同区域的轮廓。我发现了如何绑定鼠标悬停效果，所以当我将鼠标悬停在某个区域上时，它的颜色会发生变化。一切看起来都很好，直到我想从地图外部触发相同的鼠标悬停效果。所有区域都有一个 link 的列表，每个 link 应该在悬停时在地图上为其各自的地理位置（路径）着色。问题是我不知道如何从外部触发鼠标悬停效果。

这是我用于代码的参考指南：Clickable France regions map

这是我的地图初始化：

var regions = [];

var style = {
    fill: "#f2f2f2",
    stroke: "#aaaaaa",
    "stroke-width": 1,
    "stroke-linejoin": "round",
    cursor: "pointer",
    class: "svgclass"
};

var animationSpeed = 500;

var hoverStyle = {
    fill: "#dddddd"
}

var map = Raphael("svggroup", "100%", "auto");
map.setViewBox(0, 0, 585.5141, 792.66785, true);

// declaration of all regions (states)
....
var bayern = map.path("M266.49486,..,483.2201999999994Z");
bayern.attr(style).data({ 'href': '/bayern', 'id': 'bayern', 'name': 'Bayern' }).node.setAttribute('data-id', 'bayern');
regions.push(bayern);

这是我的 "normal" 鼠标效果发生的地方：

for (var regionName in regions) {
    (function (region) {
        region[0].addEventListener("mouseover", function () {
            if (region.data('href')) {
                region.animate(hoverStyle, animationSpeed);
            }
        }, true);

        region[0].addEventListener("mouseout", function () {
            if (region.data('href')) {
                region.animate(style, animationSpeed);
            }
        }, true);

        region[0].addEventListener("click", function () {
            var url = region.data('href');

            if (url){
                location.href = url;
            }
        }, true);
    })(regions[regionName]);
}

我有一个带有 link 的菜单，我想将每个菜单绑定到各自的区域，这样我也可以应用动画。

$("ul.menu__navigation li a").on("mouseenter", function (e) {
    // this function displays my pop-ups
    showLandName($(this).data("id"));
    // $(this).data("id") returns the correct ID of the region
});

如有任何想法，我将不胜感激！提前致谢！

Answer 1

我想出了一个办法。它肯定不是最佳的，尤其是在性能方面，但至少它给了我想要的输出。我仍然重视更好的答案，但截至目前，鼠标悬停事件中的一个新循环完成了这项工作。

$("ul.menu__navigation li a").on("mouseenter", function (e) {
    // this function displays my pop-ups
    showLandName($(this).data("id"));

    // animate only the one hovered on the link list
    var test = '/' + $(this).data("id");

    for (var regionName in regions) {
        (function (region) {
            if (region.data('href') === test) {
                region.animate(hoverStyle, animationSpeed);
            }        
        })(regions[regionName]);
    }
});

在拉斐尔地图上触发鼠标悬停事件

Trigger mouseover event on a Raphael map

javascript

jquery

css

raphael