Моя задача: есть определенная группа элементов, при наведении на которые на их месте должен появляется абс. позиционированный див(далее основной), как бы закрывать их. Соответственно при убирании мышки с этого осн. дива он должен удаляться. В основном диве должны присутствовать еще два дива, тоже абс. позиционированные, это как бы кнопки, по клику должно происходить некое событие, пока даже не важно какое, т.к. непонятное возникает раньше.
Функцию создания осн. дива я естественно вешаю на mouseover выбранного элемента, далее функцию его(осн. дива) удаления уже не повесить на этот элемент, т.к. осн. див его перекрывает, вешаю функцию удаления осн. дива на него самого с помощью mouseout. И скрипт действительно удаляет осн. див при убирании с него мышки. Но проблема возникает тогда, когда пытаешься навести мышку и кликнуть на два вложенных дива-кнопки, т.к. это тоже засчитывается как убирание мыши с осн. дива, несмотря на то что они находятся внутри осн. дива.
Вопрос: как сделать так что бы при наведении курсора на вложенные дивы не пропадал основной.
PS
Пробовал так же добавить к основному диву класс (addClass), и вещать функцию удаления на него - нифига не получилось.
Заранее благодарю за проявленное терпение и внимание.
jQuery(document).ready(function(){
var box_exist = false;
var x_box;
var y_box;
var w_box;
var h_box;
$('[set="vertical"]').mouseover(function() {
if(box_exist == false){
var set_box = $("<div></div>");
var up_row = $("<div></div>");
var down_row = $("<div></div>");
x_box = $(this).offset().left;
y_box = $(this).offset().top - 7;
w_box = $(this).width();
h_box = $(this).height() + 14;
up_down_x = Math.round($(this).width() / 2 - 8);
set_box.offset({ top: y_box, left: x_box });
set_box.width(w_box);
set_box.height(h_box);
up_row.css({'background' : 'url(../i/up.png)',
'position' : 'absolute',
'top' : '0',
'left' : up_down_x,
'width' : '15px',
'height' : '7px',
'cursor' : 'pointer'});
down_row.css({'background' : 'url(../i/down.png)',
'position' : 'absolute',
'bottom' : '0',
'left' : up_down_x,
'width' : '15px',
'height' : '7px',
'cursor' : 'pointer'});
set_box.css({'background-color' : '#000',
'position' : 'absolute',
'color' : '#FFF',
'opacity' : '0.5'});
set_box.appendTo('body');
up_row.appendTo(set_box);
down_row.appendTo(set_box);
box_exist = true;
}
set_box.mouseout(function() {
$(this).remove();
box_exist = false;
});
});
});
