Доброго времени суток. Помогите пожалуйста решить проблему. Ситуация такая:
По кнопке СТАРТ создается серый контейнер. Внутрь контейнера при помощи цикла for создаются боксы по елементам из массива box_names. Внутрь каждого бокса помещается еще один див блок со значением 25.
При создании каждого бокса в цикле выполняется make_title.call(box, x), (ст. 30 в коде), которая создает подсказку к этому блоку (по стилю она невидима, opacity 0).
Функция make_title на каждый бокс вешает события onmouseover, onmousemove, onmouseout. По сути, это появление/движение/исчезновение подсказки.
И все замечательно, только
беда заключается в том, что когда мышка заскакивает на блок со значением 25 или обратно выскакивает из этого дочернего блока на основной блок box,
подсказка мигает.
В этом моменте почему-то срабатывает событие onmouseout и тут же срабатывает снова событие onmouseover.
Как убрать это мигание?
Если убрать ф-цию плавного появления блока и сделать ее мгновенно при наведении курсора (т.е закомментить строки 45, 46, и убрать коммент в строке 44, то мигания не происходит.
<style type='text/css'>
.button{color:blue; width:70px; cursor:pointer; background-color:#94E947; border:1px solid black; text-align:center}
.block_container{position:absolute;top:35px;width:200px;height:100px;background-color:#BDBDBD;border:1px solid red;padding-left:5px;}
.boxes{width:32px; height:32px; border:1px solid black; display:inline-block; font-family:Arial; font-size:14px;margin-top:2px; margin-right:5px; margin-bottom:2px; text-align:center; cursor:default }
.box_value{ width: auto;outline:1px solid white; outline-offset:-1px; float:right; color:white; font-family:Arial; font-size:12px; line-height:12px; cursor:default; }
.title{ position:absolute; width:auto; max-width:250px; height:auto; display:block; border: 1px solid #bd851b; padding:8px; padding-top:3px; font-family: Tahoma; font-size:11px; line-height:12px; color:#dfb972; background-color:#414141; opacity:0 }
</style>
<div class='button' onClick='create_blocks(this)'>СТАРТ</div>
<script>
var box_names = ['Раз', 'Два', 'Три']//сколько элементов, столько и блоков
function create_blocks(btn){
btn.onclick = '';//снимаем с кнопки СТАРТ ф-цию
var block_div = document.createElement('div');//создаем контейнер для блоков
block_div.className = 'block_container';
document.body.appendChild(block_div);
for(x=0; x<box_names.length; x++){//создадим блоки внутри контейнера
var box = document.createElement('div');//сам блок box
box.className = 'boxes';//присваиваем класс
box.innerHTML = box_names[x];//пишем в блок елемент массива по которому создался блок
var box_value = document.createElement('div');//блок box_value внутри блока box
box_value.className = 'box_value';
box_value.innerHTML = 25;
box.appendChild(box_value);
document.getElementsByClassName('block_container')[0].appendChild(box);
make_title.call(box, x);//каждому блоку box повесим функцию появления подсказки
}
}
function make_title(box_numb){// создает невидимый блок подсказки и вешает события на блок box для ее появления
var box_title = document.createElement('div');
box_title.className = 'title';
box_title.innerHTML = box_names[box_numb]
document.body.appendChild(box_title);//создали подсказку, вставили на страницу, подсказка невидима
this.onmouseover = function(){//делаем подсказку видимой
box_title.style.left = mouseX+10+'px';
box_title.style.top = mouseY+10+'px';
box_title.style.visibility = 'visible';
//box_title.style.opacity = 1;
i = 0;
change_opacity(box_title, 20, 0);// функция плавного появления подсказки
}
this.onmousemove = function(){//двигаем подсказку за курсором
box_title.style.left = mouseX+10+'px';
box_title.style.top = mouseY+10+'px';
}
this.onmouseout = function(){//прячем подсказку
box_title.style.opacity = 0;
box_title.style.visibility = 'hidden';
}
}
function change_opacity(elem, time){//функция плавного появления подсказки; elem = елемент еоторый будет плавно появляться, time = время появления
itm = elem;
tm = time;
if (i < tm) {
itm.style.opacity= ++i/tm
setTimeout('change_opacity(itm, tm)', tm)
}
}
//далее определение координат курсора
var mouseX;
var mouseY;
function mousePageXY(e){
if (!e) e = window.event;
if (e.pageX || e.pageY){
mouseX = e.pageX;
mouseY = e.pageY;
}
else if (e.clientX || e.clientY){
mouseX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
mouseY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
}
document.onmousemove = function(e){mousePageXY(e); }
</script>
