Text and border of svg acting like one element

Question

I am making a map area + svg interactive map. The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear. Does anybody know how to solve this?

CSS:

   .eu {
    position: absolute;
    top: -80px;
    left: -80px;
    display: none;
    width: 1200px;
    height: 1200px;
    z-index: 300;
    }

    .visible {
    display: block;
    pointer-events: all;
    }

jQuery:

    $('#eumap').mouseover(function () {
    $('.eu').addClass('visible');
    });
    $('.eu').mouseout(function () {
    $('.eu').removeClass('visible');
    });

    $('#apmap').mouseover(function () {
    $('.ap').addClass('visible');
    });
    $('.ap').mouseout(function () {
    $('.ap').removeClass('visible');
    });

There is too much svg to copy, so here is a little DEMO

score 1 · Answer 1 · answered Jul 19 '16 at 07:19

1

You can add to your CSS...

text {
   pointer-events: none;
}

See https://jsfiddle.net/g04qhcw9/

answered Jul 19 '16 at 07:19

methodofaction

70,885
21
151
164

score 0 · Answer 2 · edited May 23 '17 at 11:44

The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear.

That’s because you are using mouseover/mouseout – they fire again each time you move the mouse over child elements. (See Jquery mouseenter() vs mouseover() for details.)

Simply use mouseenter/mouseleave instead:

$('#eumap').mouseenter(function () {
    $('.eu').addClass('visible');
});
$('.eu').mouseleave(function () {
    $('.eu').removeClass('visible');
});

https://jsfiddle.net/g04qhcw9/1/

Text and border of svg acting like one element

2 Answers2