Css переходы и div

Question

У меня есть такая структура dom:

<div class="wrapper">
   <div class="style1"> ... another divs ... </div>
</div>
<div class="wrapper">
   <div class="style2"> ... another divs ... </div>
</div>
<div class="wrapper">
   <div class="style1"> ... another divs ... </div>
</div>
<div class="wrapper">
   <div class="style2"> ... another divs ... </div>
</div>
<div class="wrapper">
   <div class="style1"> ... another divs ... </div>
</div>

В style1 и style2 есть background-color настройки для всех внутренних элементов div (помеченных как «еще один div»).* Теперь я хочу сделать фоновый переход для всех div внутри style1 и style2:

.wrapper :hover
{
    background-color: #ccc;
}

.wrapper
{
    -moz-transition: background .2s linear;
    -webkit-transition: background .2s linear;
    -o-transition: background .2s linear;
    transition: background .2s linear;
}

Это не работает (ничего не меняется).Когда я устанавливаю свойства hover для style1 и style2, он меняет фон, но только при активном погружении мышь заканчивается.

Answer 1

Если я вас правильно понимаю, вы хотите показать / пометить каждый div, который имеет определенный стиль. Поэтому при наведении курсора на один div.style1 вы хотите отметить все div1 style1. Я не знаю, как добиться этого только с помощью CSS-буф с небольшой помощью jquery / javascript, я получил что-то вроде этого:

ИЗМЕНЕННЫЙ CSS

.wrapper_hover
{
    background-color: #ccc;
}

.wrapper
{
    -moz-transition: background .2s linear;
    -webkit-transition: background .2s linear;
    -o-transition: background .2s linear;
    transition: background .2s linear;
}

КОД JQUERY

$("div").hover(
              function () {
                    $(".style1").addClass("wrapper_hover");    
            },
              function () {
                    $(".style1").removeClass("wrapper_hover");   
            }    
);

Answer 2

Убрать пробел между .wrapper и: hover.Но я мог неправильно это прочитать.Возможно, вы захотите сделать .wrapper:hover .style1 div{}