Javascript-форум - Два события при наведении, как?

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Два события при наведении, как? (https://javascript.ru/forum/dom-window/33087-dva-sobytiya-pri-navedenii-kak.html)

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

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

Есть 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;

        

}

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

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

Цитата:

Сообщение от Galyanov

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

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

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

Цитата:

Сообщение от danik.js (Сообщение 215065)

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

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

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

Цитата:

Сообщение от a_l (Сообщение 215054)

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

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

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

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