Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2016, 21:12
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

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
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2016, 22:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

    $("#area1,#box1").mouseleave(function(e) {
        $("#box1").css({
            "display": "none"
        });
    });
Ответить с цитированием
  #3 (permalink)  
Старый 06.11.2016, 10:30
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Отлично! А подскажите, как мне в один скрипт объединить все области?
У меня еще же будут #area2, #box2, #area3, #box3, #area4, #box4, #area5, #box5, #area6, #box6
Ответить с цитированием
  #4 (permalink)  
Старый 06.11.2016, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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"
        });
    });
Ответить с цитированием
  #5 (permalink)  
Старый 06.11.2016, 11:01
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать плавный переход для onmouseover Demidoff Общие вопросы Javascript 3 23.03.2014 12:52
проблема с событиями onMouseOut и onMouseOver zaman Общие вопросы Javascript 1 15.11.2012 15:22
Проблемы с событием onmouseover в разных браузерах jsuse Общие вопросы Javascript 4 29.11.2011 18:30
OnMouseOver и Дети Элемента Ваcя Общие вопросы Javascript 7 21.11.2011 12:42
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43