Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2011, 20:59
Новичок на форуме
Отправить личное сообщение для heihachi88 Посмотреть профиль Найти все сообщения от heihachi88
 
Регистрация: 05.03.2011
Сообщений: 5

Необходима помощь с событиями
Имеется следующий HTML код:

<div id="hoverthis">Наведите мышью сюда</div>
<div id="box">Всплывающий див</div>


У меня не получается сделать следующее - при наводке на #hoverthis → появляется #box с контентом, а затем при щелчке на любом элементе страницы кроме #hoverthis и #box, див #box исчезал.

А также при onmouseover на #hoverthis нужно добавлять css класс .active. Этот класс должен исчезать когда #box исчезает.

window.onload = function() {
	document.getElementById('hoverthis').onmouseover = function() {
		openbox('box', this);
		return false;
	};
	document.getElementById('hoverthis').onmouseout = function() {
		openbox('box', this);
		return false;
	}
};
function openbox(id, hoverthis) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';

	}
	else {
		div.style.display = 'block';

	}
}


Наведите меня на путь истинный, спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2011, 10:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

function addEvent( elem, evt, callback ) {
	if ( elem.addEventListener ) {
		elem.addEventListener( evt, callback, false );
	} else if ( elem.attachEvent ) {
		elem.attachEvent( "on" + evt, callback );
	}
}

function clearEvent( e ) {
	e = e || window.event
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
}

window.onload = function() {

	var elem = document.getElementById('hoverthis');

	addEvent( elem, "mouseover", function() {
		var box = document.getElementById('box');
		box.className = 'active';
		box.style.display = 'block';
		return false;
	});
	addEvent( elem, "click", function( e ) {
		clearEvent( e );
		return false;
	});
	addEvent( document.getElementById('box'), "click", function( e ) {
		clearEvent( e );
		return false;
	});

	addEvent( document, "click", function() {
		var box = document.getElementById('box');
		box.className = '';
		box.style.display = 'none';
		return false;
	});
};

примерно так)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Бесплатная помощь новичкам iCanary Общие вопросы Javascript 11 30.11.2015 20:35
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17
Необходима помощь со скриптом! evgeny_kora Ваши сайты и скрипты 4 10.01.2010 16:57
Global, Button. Необходима Помощь. Nazv Общие вопросы Javascript 1 12.12.2008 17:45