Здравствуйте, столкнулся с такой проблемой.
Есть у меня маленький скрипт
$(document).ready(function() {
$("div.home-button").mouseover(function() {
$("#menu").addClass("soro");
});
$("#menu").mouseout(function() {
$("#menu").removeClass("soro");
});
});
и, по-идее, суть его понятна и ясна, и работать он должен предельно просто.
А именно: есть на странице кнопка, и есть элемент с id="menu" - менюшка.
<header>
<section class="home">
<div class="home-button">Home</div>
<div id="menu"><a>b1</a><a>b2</a><a>b3</a><a>b4</a><a>b5</a></div>
</section>
<section>
<a>Ссылка 1</a>
<a>Ссылка 2</a>
</section>
</header>
Суть в том, что при наведении на кнопку этой менюшке должен присваиваться дополнительный класс, пусть будет visible, а при отведении курсора с этого элемента - класс должен убираться. Эта менюшка появляется в левом верхнем углу экрана, то есть перекрывает собой кнопку. Казалось бы - все просто. Навели на кнопку - добавили атрибут. Отвели с менюшки - убрали атрибут. НО, как обычно, все не так гладко.
Дело в том, что когда мышь уже находится на этом элементе, и если я сдвигаю курсор с одного дочернего элемента (a) на другой (тот, что пониже), то менюшка просто закрывается, как будто я вывел мышь за ее пределы, хотя на самом деле мышь я вывел за пределы дочернего элемента, а на основном (менюшке) она осталась.
Объясните, пожалуйста, как с этим бороться
