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存在用于所有内的div background-color设置（标记为 '另一个的div'）。

现在我想让背景TRANSATION对所有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; 
} 

它不工作（没有变化）。当我将鼠标悬停在style1和style2上时，它会改变背景，但只有主动下潜鼠标才会结束。

Answer 1

删除.wrapper和：hover之间的空间。但是我可能会误解这个。你可能想要做.wrapper:hover .style1 div{}

Answer 2

如果我理解你对，你想显示/标记每个具有特定风格的div。因此，在悬停单个div.style1时，您要标记所有style1 div。我不知道该怎么只有一点点的jQuery/JavaScript的帮助下，我得到了这样的CSS buth来实现这一目标：

CHANGED 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"); 
      }  
);