Два события при наведении, как?

[Galyanov]

Здравствуйте.
Вот столкнулся с проблемой, решить которую может наверно только скрипт, а я не силен в ява.

Есть DIV в котором имеется изображение являющееся ссылкой.
Также в нем есть блок с ценой и фоновой картинкой, у него position:absolute и расположен он внизу родительского дива.
Еще есть скрытый div с информацией на полупрозрачном фоне.

Надо, чтобы при наведении на div с изображением, показывался скрытый див, а блок с ценой поднимался чуть выше т.е. смещался.

С помощью CSS я могу только показать скрытый блок с информацией, но надо еще одновременно с показом смещать блок с ценой. Вот как это сделать я не знаю.

Для наглядности скрин:


Код:

<div class="image">

	<div class="price-img">цена</div>
	<div class="pr-info">инфо</div>
								
	<a href="ссылка"><img src="image.jpg" title="" alt=""  /></a>
	  
</div>

Стили:

.product-grid .image {
	position:relative;
	display: block;
	margin-bottom: 0px;
}
.price-img {
	position:absolute;
	background:url("../image/price.png") no-repeat;
	width:144px;
	height:42px;
	left:0;
	bottom:25px;
	z-index:99;
}
.pr-info{
    position:absolute;
    bottom:0;
    display:none;
	
}

Подскажите как с помощью скрипта сделать два события при наведении, показать скрытый блок и сдвинуть блок с ценой наверх?

[a_l]

document.getElementsByClassName('image')[0].onmouseover = function() {
  document.getElementsByClassName('pr-info')[0].style.display = 'block';
  document.getElementsByClassName('price-img')[0].style.bottom = '60px';
};

[danik.js]

С помощью CSS я могу только показать скрытый блок с информацией, но надо еще одновременно с показом смещать блок с ценой

Это принципиально одно и тоже. Не понимаю как тут могла возникнуть проблема:

.product-grid .image:hover .price-img {
	bottom: 60px;
}
.product-grid .image:hover .pr-info{
         display: block;
}

[Galyanov]

.product-grid .image:hover .price-img {
	bottom: 60px;
}
.product-grid .image:hover .pr-info{
         display: block;
}

В том то и дело, что не срабатывает это! Делал я уже так, на месте он остается.
upd
А нет, работает! Странно, еще сегодня я так делал и не сдвигался, может с классами что-то попутал? Хм... Ну тогда и скриптов не надо раз заработало, спасибо))

[Galyanov]

document.getElementsByClassName('image')[0].onmouseover = function() {
  document.getElementsByClassName('pr-info')[0].style.display = 'block';
  document.getElementsByClassName('price-img')[0].style.bottom = '60px';
};

Ваш способ как-то странно срабатывает. В первом диве сразу поднят блок и показан скрытый, и при наведении ничего больше не срабатывает

[a_l]

Galyanov, мой код рабочий. Выполняется он у вас после загрузки страницы?

[Your]

легко)))по
всем вопросам в личку...