Safari に問題があり、Leaflet でマップを作成します。これは http://jsfiddle.net/DBJb7/の小さなデモ です。
CSS プロパティ 'hover' は、Safari 以外では機能します。で解決しようとしますz-index
が、うまくいきません。
誰にもアイデアはありますか?
編集: http://bost.ocks.org/mike/leaflet/
このプロジェクトにも同じ問題があるようです。
Safari に問題があり、Leaflet でマップを作成します。これは http://jsfiddle.net/DBJb7/の小さなデモ です。
CSS プロパティ 'hover' は、Safari 以外では機能します。で解決しようとしますz-index
が、うまくいきません。
誰にもアイデアはありますか?
編集: http://bost.ocks.org/mike/leaflet/
このプロジェクトにも同じ問題があるようです。
CSS を使用する代わりに、次のコードを D3.js JavaScript に実装してみてください。
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 は、D3.js が行う SVG の再描画ではなく、新しい画像を取り込むだけです。私の唯一の推測は、Safari がパス要素の z-index を無視していることです。これは、パス領域を右クリックし、ドロップダウンから [要素の検査] を選択するたびに明らかです。Chrome ではパス要素の HTML が表示されますが、Safari では Leaflet によって取り込まれた画像の HTML が表示されます。