Problem in SVG image. Event mouseenter (), mousemove (), and mouseleave ()

Question

Problem in SVG image. Event mouseenter (), mousemove (), and mouseleave ()

Navigation

#1 by (1 votes)

1

I have an SVG image with the States of the Country, and when I hover over a State, the image with the name of the State appears and follow the mouse.

I have already made the image appear and disappear with the events mouseenter and mouseleave , however, I can not make it follow the mouse within the state with mousemove .

Follow the code:

$('path.str0').mouseenter(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');

            //Estou mexendo aqui. Ewerton Melo
            $('img').filter( '.' + pieces[2]).css("display", "block");
            //Até aqui

            $(this).attr('fill', "#00d4ff");
        }).mousemove(function(e){
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = $(this).width(); //Find width of tooltip
            var tipHeight = $(this).height(); //Find height of tooltip

            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);

            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
            }
            //Absolute position the tooltip according to mouse position
            $(this).css({  top: mousey, left: mousex });
        }).mouseleave(function(){
            var thisClass = $(this).attr('class');
            var pieces = thisClass.split(' ');
            //console.log($('img').filter( '.' + pieces[2]).css("display", "none"));
            $('img').filter( '.' + pieces[2]).css("display", "none");
            $(this).attr('fill', "#00b2d6");
        });

jquery svg eventos-do-mouse

asked by anonymous 14.04.2014 / 21:38

1 answer

JPQL to query date / time of bank with hibernate without native query use of localdb with team foundation server

score 1 · Answer 1

Since you did not include CSS or HTML, I'll assume that SVG is just about any image, and that you do not have a predefined CSS.

For your JavaScript, you also have a img image.

$('img').filter( ... );

I've created a simple SVG (a circle) that represents the SVG you're using:

<svg viewBox="0 0 200 200" width="200" height="200">
    <circle class="a b c" r="100" cx="100" cy="100" fill="red" />
</svg>

And I changed the path.str0 reference of your code to it for this example:

$('circle').mouseenter(function(){
   var thisClass = $(this).attr('class');
   var pieces = thisClass.split(' ');

I also created an image, a <img> and put three arbitrary classes a , b and c into SVG, since its code tries to extract the third class from svg to reference img :

$('img').filter( '.' + pieces[2]).css("display", "block");

Apparently everything is working correctly (SVG changes color in mouseover and mouseout , image disappears, and coordinates change during mousemove .) I include a DIV to monitor the mousemove coordinate change %:

$('#coords').html('y: '+mousey+', x: '+mousex);

The coordinate change is happening, but the placement type has not been defined (I'm assuming you did not define this in CSS). So it is not an SVG error, but a CSS error. To position in CSS you need to set position beyond the coordinates ( top , left , bottom or right ). It will work if you add a CSS with:

img {
    position: absolute;
}

See here JSFiddle for an attempt to reproduce your problem and solution. I think you'll be able to adapt it to your problem.