hover для двух классов в блоке, подскажите

L
На сайте с 18.02.2012
Offline
83
1237

Здравствуйте, есть блок в нем есть два класса ! при наведении мышкой, срабатывает hover, меняеться первый блок, цвет его, а так же в блоке есть стоимость и у стоимости есть свой фон, хотел сделать что бы при наведении на блок главный, менялся он и где стоимость цвет то же менялся.

сам блок


.ib-containertov article{
display: block;
width: 367px;
height: 200px;
background-image: url(/media/images/blockgltov.jpg);
cursor: pointer;
float: left;
margin: 0px 7px 10px 7px;
z-index: 1;
-webkit-backface-visibility: hidden;
-webkit-transition:
opacity 0.4s linear,
-webkit-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-moz-transition:
opacity 0.4s linear,
-moz-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-o-transition:
opacity 0.4s linear,
-o-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-ms-transition:
opacity 0.4s linear,
-ms-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;

}
.ib-containertov article:hover{
background-image: url(/media/images/blockgltov1.jpg);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 100;
opacity: 1;
}

В блоке есть блок ценника


.moneyicon{
float:left;
margin-left: 192px;
margin-top: -44px;
height: 34px;
width: 159px;
background-image: url(/media/images/cenaaaa.png);
}

все это обернуто в article


<section class="ib-containertov" id="ib-containertov">
<a href="/advertisement/view/<?php echo $adv->id?>"><article><center><header>
<div class="blockglimgtov">
картинка
</div>
<h3>
Заголовок
</h3>
</header>
<div style="clear:both"></div>
<div class="moneyicon">
<p><strong>цена</strong> руб</p>
</div>
</center></article></a>
</section>

Пробовал вариацию такую.


.ib-containertov article:hover{
background-image: url(/media/images/blockgltov1.jpg);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 100;
opacity: 1;
}
article, .moneyicon:hover{
background-image: url(/media/images/cenaaaa1.png);
}

не срабатывает, еще пробовал пару вариантов то же напрасно, видимо не хватает моих знаний для этого, подскажите пожалуйста.

Desesperada
На сайте с 11.10.2010
Offline
77
#1

назову для удобства своими именами

родитель - block1

внутренний блок - item

ещё внутренний - item_two

ну а дальше как душа ляжет

при наведении на родитель меняем фон внутреннего

.block1:hover .item {background:red;}

и различные вариации

.block1:hover .item_two {background:blue;}

если все вложено то и так можно

.block1 .item:hover .item_two {border:10px #000 solid;}
Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
L
На сайте с 18.02.2012
Offline
83
#2
Desesperada:
назову для удобства своими именами
родитель - block1
внутренний блок - item
ещё внутренний - item_two

ну а дальше как душа ляжет
при наведении на родитель меняем фон внутреннего


и различные вариации


если все вложено то и так можно

Спасибо, работает :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий