html - Leaflet + D3 - Safari 上没有鼠标悬停

Question

我对 Safari 和使用 Leaflet 创建的地图有疑问：这是一个小演示 http://jsfiddle.net/DBJb7/ 。

CSS 属性“悬停”在 Safari 中除外。我尝试解决它，z-index但它不起作用。

有人有想法吗？

编辑：http
://bost.ocks.org/mike/leaflet/这个项目似乎有同样的问题。

Answer 1

您可以尝试在您的 D3.js JavaScript 中实现以下代码，而不是使用 CSS：

var feature = g.selectAll("path")
        .data(collection.features)
    .enter().append("path").attr('style','z-index:9999')
    .on("mouseover", function() {
        d3.select(this).css("fill", "green").css("stroke", "red");
    })
    .on("mouseout", function() {
        d3.select(this).css("fill", "").css("stroke", "");
    });

我发现使用 JavaScript 应用样式比尝试使用 CSS 更有效且更易于维护，除非您专门使用类。在这种情况下，我将使用该.classed()方法（https://github.com/mbostock/d3/wiki/Selections#wiki-classed）来管理类的添加和删除。

希望这可以帮助！如果没有，对不起。：-/

编辑 1

我进行了编辑以包含鼠标移出功能。在深入研究之后，Leaflet 只是引入新图像，而不是重绘 SVG，这正是 D3.js 所做的。我唯一的猜测是 Safari 忽略了路径元素的 z-index。每当您右键单击路径区域然后从下拉列表中选择检查元素时，这一点都很明显。在 Chrome 上，它会显示路径元素的 HTML，但在 Safari 上，它会显示由 Leaflet 内容拉入的图像的 HTML。