Jump to content
  • 0

JQuery. Помогите новичку с решением бага.


MiHALbI4
 Share

Question

Привет всем!

Я только недавно начал изучать JQuery, так что встала загвоздка в решении такой задачи.

Вот накидал шаблон с этой проблемой. Если зоны (в примере их два серых блока, в жизни будет намного больше), сделанные через тэг «area», (в примере они просто прямоугольные, а в жизни будет очень ломанные).

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

https://photos-1.dropbox.com/t/1/AAAjNJ5vPJsGREqlpIEcsDPrE4iRpMKoiJmjcdJQOINLqg/12/44729395/png/1024x768/3/1412802000/0/2/1.png/xFiYIlGwk2FhOikQb0id0H37PIGNrtHprtbzSGv_biI

 

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

 

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

https://photos-3.dropbox.com/t/1/AADLcXIWwxxhKihkEGysuAh88Jp4Su9fkn_5V_q-uwvR4Q/12/44729395/png/1024x768/3/1412802000/0/2/2.png/2nLHv2vbwSAl9y3QWA8NTR7qaXsexakFRft6e4X0CrE

 

Только при решении этой задачи должно учитываться:

1) Скрипт на JQuery

2) Структура верстки должна остаться как в шаблоне, не меняя ее вообще!!!

 

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

 

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

https://www.dropbox.com/s/y1oksjgeqwp79jr/area_hover.zip?dl=0

Edited by MiHALbI4
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy