Всплывающее окно по id

[NeonMan]

Подскажите пожалуйста, есть область - это path в svg, их несколько разных, для каждой есть всплывающее окно, но как при наведении прописать, что бы для области открывалось конкретное окно (по уникальному id например), а другое окно, открытое до этого из другой области закрывалось (окна сделаны div).

[рони]

NeonMan,
сделайте минимальный макет

[NeonMan]

Поступил таким образом:

$('.country').hover (
function() {
    $('.country-popup').hide();
    $('.country').css('opacity','0');
    $(this).css('opacity','1');
    var activeCountry = $(this).attr('href');
    $(activeCountry).show();          
});

Прописал href в path для id каждого из окон, но правильно ли в path прописывать href, может есть какой-то еще способ для такой ситуации, было бы интересно взглянуть

[рони]

NeonMan,
... ждите телепатов

[NeonMan]

))
вот карта с областями, о которой я писал выше, сделал попапы поведение, код который написал, но есть может какой-то еще способ, ради проф интереса, а то мне кажется прописывать href="" в path svg файла не очень корректно

[рони]

NeonMan,
можно по индексу тогда никаких id не надо совсем

[рони]

NeonMan,

$(function() {
    var country = $(".country"),
        popup = $(".country-popup"),
        btn = $(".country-popup-btn");

    function hide() {
        popup.hide();
        country.css("opacity", "0")
    }
    country.hover(function() {
        hide();
        $(this).css("opacity", "1");
        var activeCountry = country.index(this);
        popup.eq(activeCountry).show()
    });
    btn.click(function(event) {
        event.preventDefault();
        hide()
    })
});

[NeonMan]

Интересная конструкция, спасибо

[NeonMan]

Подскажите такой момент, есть такая структура

$('#kazan').mouseenter (
    function() {
        $('.menu-kazan').css('background', '#CEF5FC');      
});
$('#kazan').mouseout (
    function() {
        $('.menu-kazan').css('background', 'none');
});

Это при наведении на один элемент, подсвечивается другой, и когда курсор уходит с элемента, тому присваивается значение background: none, но потом когда уже навожу непосредсвенно на .menu-kazan больше не срабатывает .menu-kazan:hover {background: цвет} из css. Может есть какой-то другой способ в jquery сделать такую операцию?

[рони]

NeonMan,
цвет нужен - лучше цвет и менять.

Подскажите

уберите none из кода и будет вам счастье.