Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   JQuery. Помогите новичку с решением бага. (https://javascript.ru/forum/misc/50722-jquery-pomogite-novichku-s-resheniem-baga.html)

MiHALbI4 08.10.2014 23:42
JQuery. Помогите новичку с решением бага.
 
Вложений: 1
Привет всем!
Я только недавно начал изучать JQuery, так что встала загвоздка в решении такой задачи.
Вот накидал шаблон с этой проблемой. Если зоны (в примере их два серых блока, в жизни будет намного больше), сделанные через тэг «area», (в примере они просто прямоугольные, а в жизни будет очень ломанные).
Суть проблемы: при наведении на зону появляется картинка (желтая), которая накладывается поверх «area» и так же вплывает подсказка (синяя). Я это реализовал на JQuery, но появился неприятный баг. При перемещении мышки из желтой области в синюю (в красной рамке):



происходит мигание этих блоков, т.е. они исчезают и опять появляются. Вот это мне и нужно как-то исправить, чтобы такого не происходило. Почему так происходит я понимаю, но знаний по JQuery у меня не хватает, чтобы это решить...

Так же очень бы хотелось (желательно, но не критично), чтобы при наведении мыши в эту зону (в красной рамке) ничего не исчезало, а только когда курсор уйдет сразу из двух этих блоков (желтый и синий):



Только при решении этой задачи должно учитываться:
1) Скрипт на JQuery
2) Структура верстки должна остаться как в шаблоне, не меняя ее вообще!!!

Посмотреть в живую: http://jsfiddle.net/z80on04d/

Прикладываю архив, скрипт написан прямо в теле шаблона. Думаю все доходчиво объяснил :)

bes 09.10.2014 00:37
Цитата:
Сообщение от MiHALbI4
При перемещении мышки из желтой области в синюю (в красной рамке)
происходит мигание этих блоков, т.е. они исчезают и опять появляются. Вот это мне и нужно как-то исправить, чтобы такого не происходило. Почему так происходит я понимаю, но знаний по JQuery у меня не хватает, чтобы это решить...
 
.map_hack {
  z-index:100;
}



Цитата:
Сообщение от MiHALbI4
Так же очень бы хотелось (желательно, но не критично), чтобы при наведении мыши в эту зону (в красной рамке) ничего не исчезало, а только когда курсор уйдет сразу из двух этих блоков (желтый и синий)
нет желания городить на нагороженном :)

рони 09.10.2014 02:22
MiHALbI4,
:write: так?
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <style type='text/css'>
   body{margin:0}
  .main_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:200px;font-size:0;line-height:0;position:absolute}
  .main img{border:none}
  .regions_map,.region_zone{top:0px;left:0px;position:absolute}
  .map_hack{position:relative}
  .popup_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:0;position:absolute}
  .popup_zone_item{top:0;width:90px;height:100px;background:#01a0db;position:absolute}
  .region_01-info{left:0}
  .region_02-info{right:0}
  </style>
<script>
$(window).load(function() {
    $('.region_zone, .popup_zone_item').hide(0);
    var regionMap, blockInfo;
    $('#regions_map area').mouseenter(function(event) {
        regionMap = '.' + $(this).attr('id') + '-map';
        blockInfo = '.' + $(this).attr('id') + '-info';
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeIn(300);
    })
    $('#regions_map area').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
    $('.popup_zone_item').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('map_hack')) return;    
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
});
</script>
</head>
<body>
  <!--block-->
<div class="main_block">
	<map name="regions_map" id="regions_map">
		<area id="region_01" shape="rect" coords="32,48,217,153" alt="">
		<area id="region_02" shape="rect" coords="284,48,469,154" alt="">
	</map>
	<img  class="regions_map" src="http://s9.postimg.org/e3v5g34v3/main.png" width="500" height="200" alt="">
	<img class="region_zone region_01-map" src="http://s15.postimg.org/e2m4p68ln/left_hover.png" width="500" height="200" alt="">
	<img class="region_zone region_02-map" src="http://s29.postimg.org/quxquu5yv/right_hover.png" width="500" height="200" alt="">
	<img class="map_hack" src="http://s29.postimg.org/ep3y6p1v7/fix.png" width="500" height="200" usemap="#regions_map" alt="">
</div>
<!--END block-->

<!--popup-->
<div class="popup_block">
	<div class="popup_zone_item region_01-info"></div>
	<div class="popup_zone_item region_02-info"></div>
</div>
<!--END popup-->

</body>
</html>

bes 09.10.2014 18:45
Цитата:
Сообщение от рони
так?
почти, только при уходе с синего на жёлтый всё скрывается, а также не скрывается при уходе с синего не на жёлтый :)

bes 09.10.2014 19:28
забыл, что можно сделать так

рони 09.10.2014 20:28
bes,
в каком это браузере ?
Цитата:
Сообщение от bes
только при уходе с синего на жёлтый всё скрывается

bes 09.10.2014 21:29
Цитата:
Сообщение от рони
bes,
в каком это браузере ?
хром, опера, ff :)

проблема осталась всего в одном моменте и лечится примерно так 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <style type='text/css'>
   body{margin:0}
  .main_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:200px;font-size:0;line-height:0;position:absolute}
  .main img{border:none}
  .regions_map,.region_zone{top:0px;left:0px;position:absolute}
  .map_hack{position:relative}
  .popup_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:0;position:absolute}
  .popup_zone_item{top:0;width:90px;height:100px;background:#01a0db;position:absolute}
  .region_01-info{left:0}
  .region_02-info{right:0}
  </style>
<script>
$(window).load(function() {
    $('.region_zone, .popup_zone_item').hide(0);
    var regionMap, blockInfo;
    $('#regions_map area').mouseenter(function(event) {
        regionMap = '.' + $(this).attr('id') + '-map';
        blockInfo = '.' + $(this).attr('id') + '-info';
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeIn(300);
    })
    $('#regions_map area').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
    $('.popup_zone_item').mouseleave(function(event) {
        //if ($(event.relatedTarget).hasClass('map_hack')) return;    
        *!*if ($(event.relatedTarget).hasClass('area')) return;  */!*
  
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
});
</script>
</head>
<body>
  <!--block-->
<div class="main_block">
	<map name="regions_map" id="regions_map">
		<area class="area" id="region_01" shape="rect" coords="32,48,217,153" alt="">
		<area class="area" id="region_02" shape="rect" coords="284,48,469,154" alt="">
	</map>
	<img  class="regions_map" src="http://s9.postimg.org/e3v5g34v3/main.png" width="500" height="200" alt="">
	<img class="region_zone region_01-map" src="http://s15.postimg.org/e2m4p68ln/left_hover.png" width="500" height="200" alt="">
	<img class="region_zone region_02-map" src="http://s29.postimg.org/quxquu5yv/right_hover.png" width="500" height="200" alt="">
	<img class="map_hack" src="http://s29.postimg.org/ep3y6p1v7/fix.png" width="500" height="200" usemap="#regions_map" alt="">
</div>
<!--END block-->

<!--popup-->
<div class="popup_block">
	<div class="popup_zone_item region_01-info"></div>
	<div class="popup_zone_item region_02-info"></div>
</div>
<!--END popup-->

</body>
</html>

рони 09.10.2014 22:22
bes,
был и у меня такой вариант но в ie он неработает, поэтому я и исправил как раз эту строку ... ))) был ещё и такой вариант ... вроде рабочий ... но чем то он мне не понравился)))

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
   body{margin:0}
  .main_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:200px;font-size:0;line-height:0;position:absolute}
  .main img{border:none}
  .regions_map,.region_zone{top:0px;left:0px;position:absolute}
  .map_hack{position:relative}
  .popup_block{top:0;bottom:0;left:0;right:0;margin:auto;width:500px;height:0;position:absolute}
  .popup_zone_item{top:0;width:90px;height:100px;background:#01a0db;position:absolute}
  .region_01-info{left:0}
  .region_02-info{right:0}
  </style>
<script>
$(window).load(function() {
    $('.region_zone, .popup_zone_item').hide(0);
    var regionMap, blockInfo;
    $('#regions_map area').mouseenter(function(event) {
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        regionMap && $(regionMap + ',' + blockInfo).hide();
        regionMap = '.' + $(this).attr('id') + '-map';
        blockInfo = '.' + $(this).attr('id') + '-info';
        $(regionMap + ',' + blockInfo).stop(true, true).fadeIn(300);
    })
    $('#regions_map area').mouseleave(function(event) {
        if ($(event.relatedTarget).hasClass('popup_zone_item')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
    $('.popup_zone_item').mouseleave(function(event) {
        if (!$(event.relatedTarget).is('html')) return;
        $(regionMap + ',' + blockInfo).stop(true, true).fadeOut(400);
    });
});
</script>
</head>
<body>
  <!--block-->
<div class="main_block">
	<map name="regions_map" id="regions_map">
		<area id="region_01" shape="rect" coords="32,48,217,153" alt="">
		<area id="region_02" shape="rect" coords="284,48,469,154" alt="">
	</map>
	<img  class="regions_map" src="http://s9.postimg.org/e3v5g34v3/main.png" width="500" height="200" alt="">
	<img class="region_zone region_01-map" src="http://s15.postimg.org/e2m4p68ln/left_hover.png" width="500" height="200" alt="">
	<img class="region_zone region_02-map" src="http://s29.postimg.org/quxquu5yv/right_hover.png" width="500" height="200" alt="">
	<img class="map_hack" src="http://s29.postimg.org/ep3y6p1v7/fix.png" width="500" height="200" usemap="#regions_map" alt="">
</div>
<!--END block-->

<!--popup-->
<div class="popup_block">
	<div class="popup_zone_item region_01-info"></div>
	<div class="popup_zone_item region_02-info"></div>
</div>
<!--END popup-->

</body>
</html>

рони 09.10.2014 22:27
:-? забавно
хром
Цитата:
Последний раз редактировалось рони, Сегодня в 01:40.
ие
Цитата:
Последний раз редактировалось рони, Сегодня в 02:40.
на час разница :blink:

bes 09.10.2014 22:36
Цитата:
Сообщение от рони
bes,
был и у меня такой вариант но в ie он неработает, поэтому я и исправил как раз эту строку ... )))
у меня в ie8 так вообще ни один из приведённых вариантов нормально не работает :haha:

Цитата:
Сообщение от рони
был ещё и такой вариант ... вроде рабочий ... но чем то он мне не понравился)))
так тем же самым
Цитата:
Сообщение от bes
а также не скрывается при уходе с синего не на жёлтый

Цитата:
Сообщение от рони
забавно
у меня в ie8 с этим норм


Часовой пояс GMT +3, время: 04:47.