Deerua about Coding -> Заметки с тегом «OnMouseOver»

Если просто отобразить див по МаусОвер, то при наведении мыши, на любой из его внутренних елементов, он сразу исчезнет, а нам это не нужно ;)

Для того что бы этого небыло, используем простой код:

//Обьявляем ивент для всех браузеров и Експлорера	
function addHandler(node, evt, func) {
    if (node.addEventListener) {
        node.addEventListener(evt, func, false); 
    } else {
        node.attachEvent('on' + evt, func);     
    }
};
//Получаем список парент елементов обьекта - рекурсивно
function isParent(child, parent) {
    if (!child || !parent) {
        return false;
    }
    while (true) {
        if (child == parent) {
            return true;
        }
        if (child.parentElement) {
            child = child.parentElement;
        } else if (child.parentNode) {
            child = child.parentNode;
        } else {
            return false;
        }
    }
}
// Простой текст-заготовка
var preperedText = "<div style='position: absolute; width: 300px; background: #ccc;'>
<h1>Cool Popup</h1>\
<p>Here the sample Text (<b>in paragraph</b>)\
with <i>some</i> <u>styling</u> and picture above<br/>\
<img src='Astronaut.gif' title='Picture'></p></div>";
function zaatachim(container) {
	var injection = document.getElementById(container);
	// Вставляем в контейнер приготовленный текст
	// Текст можно получить и через Ajax ;)
	injection.innerHTML = preperedText;
	// Цепляем ивент на контейнер с Айди container
	addHandler(injection, 'mouseout', function(e) {
	    var target = e.relatedTarget || e.toElement;
	    if(!isParent(target, injection) ) {
	       	injection.innerHTML = '';
	    }
	});
	// если текст цепляем через Ajax, не забываем о задержках ;)
}

• Посмотреть пример
• Скачать пример (zip 53.1Kb с картинкой)