Question

I have such dom structure:

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

In style1 and style2 there is background-color settings for all inner divs (marked as ‘another divs’).

Now I want to make background transation for all divs inside style1 and 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;
}

It doesn’t work (nothing changes). When I set hover propery for style1 and style2 it changes background, but only active dive the mouse is over.

Answer 1

Remove the space between .wrapper and :hover. But I may have mis-read this. You might want to do .wrapper:hover .style1 div{}