Question

我第一次使用Raphael插件，到目前为止，我设法制作了一张德国地图，并概述了里面的所有不同地区。我发现了如何绑定鼠标悬停效果，因此当我将鼠标悬停在某个区域时，其颜色会发生变化。一切看起来都很好，直到我想从地图外部触发相同的鼠标悬停效果。有一个指向所有区域的链接列表，每个链接在悬停时应在地图上为其各自的地理位置（路径）着色。问题是我不知道如何从外部触发鼠标悬停效果。

这是我用于代码的参考指南：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);

这是我和＃34;正常＆＃34;鼠标效应发生：

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]);
}

我有一个带链接的菜单，我想将它们中的每一个绑定到相应的区域，这样我也可以应用动画。

$("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]);
    }
});

在Raphael地图上触发鼠标悬停事件

1 个答案: