фонарик,
читать доку про
События 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>