[Vuejs]-How to add hover effect or mouseover/mousenter effect in a country map?

by

0👍

Maybe this is better solution : Interactive map in vue with svg.js

PREVIOUS POST :

Your can make this

const states = document.querySelectorAll("#svg path");
states.forEach(function(el) {
    el.addEventListener("mouseenter", function() {
        // show data box
    });
    el.addEventListener("mouseleave", function() {
        // Remove data box
    });
});

Your svg

<svg id="svg" ref="svg" height="600" width="1300">
    <g id="states">
        <path v-for="..."></path>
    </g>
 </svg>

Better, you can create your own directive to show box and use again it on other project or share

<svg ref="svg" height="600" width="1300">
    <g id="states">
        <path v-for="..." v-map-data="data"></path>
    </g>
 </svg>

Leave a comment