Javascript-форум - Изменение свойств одного блока при наведении курсора на другой

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Изменение свойств одного блока при наведении курсора на другой (https://javascript.ru/forum/events/36819-izmenenie-svojjstv-odnogo-bloka-pri-navedenii-kursora-na-drugojj.html)

Изменение свойств одного блока при наведении курсора на другой

Задача для меня пока ещё сложная, поэтому прошу помощи.
Необходимо, чтобы при наведении курсора на блок с классом .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>

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;
}

Цитата:

Сообщение от nikita.mmf

getElementsByClassName

Тогда уж лучше querySelector('.class') - он в IE8 работает.
Хотя в нем всеравно opacity не работает..

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

Не могли бы объяснить, почему в данном случае цикл нужно начинать с i = -1 ?

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