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