onmouseover моргает
 

Добрый день.
Есть карта с регионами, необходимо сделать чтобы при наведении на регионы появлялась нужная информация. :hover не катит, так его как понял нельзя применять к area.
Использую такой скрипт:

$( "#area1" ).mouseover(function(e) {
  $("#box1").css({"display":"block"});
});

$( "#area1" ).mouseout(function(e) {
  $("#box1").css({"display":"none"});
});

Но при наведении (розовый округ (Южный)) все начинает моргать. как понимаю конфликтуют события. Как исправить?
Посмотреть можно здесь: http://centerprogress.ru/common/test/test2

Batyabest,

$("#area1,#box1").mouseenter(function(e) {
        $("#box1").css({
            "display": "block"
        });
    });

    $("#area1,#box1").mouseleave(function(e) {
        $("#box1").css({
            "display": "none"
        });
    });

Отлично! А подскажите, как мне в один скрипт объединить все области?
У меня еще же будут #area2, #box2, #area3, #box3, #area4, #box4, #area5, #box5, #area6, #box6

Batyabest,
всем блокам добавить класс, наример hover и атрибут data-id="#box1" в #area1,#box1 и data-id="#box2" в #area2,#box2 и тд.

$(".hover").on("mouseenter mouseleave",function(e) {
        var id = $(this).data('id');
        $(id).css({
            "display": e.type == "mouseenter" ? "block" : "none"
        });
    });

Спасибо большое!