Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2013, 14:36
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

Изменение свойств одного блока при наведении курсора на другой
Задача для меня пока ещё сложная, поэтому прошу помощи.
Необходимо, чтобы при наведении курсора на блок с классом .video_frame[i] плавно исчезал соответствующий ему блок с названием .title_box[i].

Причём нужно сначала плавно изменить opacity для .title_box[i] до нуля, а потом изменить z-index блока на -1. Плавное изменение прозрачности — визуальный эффект, а z-index необходимо изменить, чтобы title_box не перекрывал элементы управления видео.

Поддержка старых IE не нужна.

Кусок кода, который получилось набросать (естественно, что работает он только для первого .title_box):

var video_frames = document.querySelectorAll('#movies .video_frame');
	var title_boxes = document.querySelectorAll('#movies .title_box');
		for (var i = 0, video_frame; video_frame = video_frames[i]; i++){
			video_frame.onmouseover = hide_title;
			video_frame.onmouseout = show_title;
		}
	var box_style = title_boxes[0].style;
	function hide_title(){box_style.opacity='0'; box_style.zIndex='-1'}
	function show_title(){box_style.opacity='1'; box_style.zIndex='1'}


Ссылка на сверстанную страницу: http://www.ilyanelin.ru/video

Кусок html-кода:

<div id="movies">
	<div class="video_frame">
		<div class="title_box">
			<div class="video_title">
				<strong>the last september</strong><br />(promo trailer)
			</div>
		</div>
		<iframe src="http://player.vimeo.com/video/46383763?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"
		webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2013, 19:22
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

var moviesEl = document.getElementById( 'movies' );
var video_frames = moviesEl.getElementsByClassName( 'video_frame' );
var title_boxes = moviesEl.getElementsByClassName( 'title_box' );
for ( var i = -1, video_frame; video_frame = video_frames[++i]; ) {
	if ( !(i in title_boxes) ) break;
	video_frame.title_box = title_boxes[ i ];
	video_frame.onmouseover = hide_title;
	video_frame.onmouseout = show_title;
}
var box_style = title_boxes[0].style;
function hide_title(){ 
	var box_style = this.title_box.style;
	box_style.opacity = 0;
	box_style.zIndex = -1;
}
function show_title(){
	var box_style = this.title_box.style;
	box_style.opacity = 0;
	box_style.zIndex = -1;
}
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2013, 20:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от nikita.mmf
getElementsByClassName
Тогда уж лучше querySelector('.class') - он в IE8 работает.
Хотя в нем всеравно opacity не работает..
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2013, 18:43
Интересующийся
Отправить личное сообщение для latter-day Посмотреть профиль Найти все сообщения от latter-day
 
Регистрация: 22.10.2010
Сообщений: 15

Никита, большое спасибо.

Не могли бы объяснить, почему в данном случае цикл нужно начинать с i = -1 ?
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2013, 18:35
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

Чтобы i соответствовала текущему индексу
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 21:54