Событие onmouseout при наведении мышки на дочерний элемент
 

Доброго времени суток. Помогите пожалуйста решить проблему. Ситуация такая:
По кнопке СТАРТ создается серый контейнер. Внутрь контейнера при помощи цикла 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>

фонарик,
читать доку про События mouseenter и mouseleave

<!DOCTYPE html>
<meta charset="utf-8">
<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:480px;height:200px;background-color:#BDBDBD;border:1px solid red;padding-left:5px;}
.boxes{width:150px; height:150px; 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:80px; height:80px;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(event){
        var target = event.relatedTarget;
        while (target != document) {
            if (target == this) {
              event.preventDefault();
              return false
                };
          target = target.parentNode
                };

    //делаем подсказку видимой
		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(event){
        var target = event.relatedTarget;
        while (target != document) {
            if (target == this) {
              event.preventDefault();
              return false
                };
          target = target.parentNode
                };

        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>

рони, спасибо вам за решение и за ссылку. Я копал в эту сторону больше дня, но я не программист, не хватает знаний и навыков. Хорошо что есть такой форум :)