徘徊在多個div

我有6周的div我要放大我的我的代碼當前活動的股利是：徘徊在多個div

#section1,#section2,#section3 ,#section4,#section5,#section6{ 
 
      width:200px; 
 
      height:200px; 
 
      background:#41aacc; 
 
      margin:20px; 
 
      cursor:pointer; 
 
     } 
 
     #wrapper{ 
 
      width:60%; 
 
      margin:0 auto; 
 
      display:flex; 
 
      align-items:center; 
 
      justify-content:center; 
 
      flex-wrap:wrap; 
 
     }

<div id="wrapper"> 
 
    <div id="section1"> 
 
    </div> 
 
    <div id="section2"> 
 
    </div> 
 
    <div id="section3"> 
 
    </div> 
 
    <div id="section4"> 
 
    </div> 
 
     <div id="section5"> 
 
    </div> 
 
     <div id="section6"> 
 
    </div> 
 
     </div>

我不想使用多個選擇像#selector1:hover{transform:scale(1.1)}等等。我可以如何實現它而不用爲所有的div迭代它。在此先感謝。

來源

2017-02-07 hemant patwal

爲什麼你不能使用'#wrapper div：hover'？ –

@MarianIoan我大多同意，但'＃wrapper> div：hover'會更好。那麼更深的嵌套div將不會受到影響。 –

@LukeBriggs確實如此。我認爲他會將這種技術用於圖像，並且它不會是更深的嵌套。我的錯！ –

你需要寫

div[id^="section"] {...}

這個選擇會得到所有的值id div的開始「一節」

或多個特定

#wrapper > div[id^="section"] {...}

看片段

的

#wrapper > div[id^="section"] { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #41aacc; 
 
    margin: 20px; 
 
    cursor: pointer; 
 
    transition: all .5s ease; 
 
} 
 
#wrapper{ 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
#wrapper > div[id^="section"]:hover 
 
{ 
 
    transform: scale(1.1); 
 
}

<div id="wrapper"> 
 
    <div id="section1"> 
 
    </div> 
 
    <div id="section2"> 
 
    </div> 
 
    <div id="section3"> 
 
    </div> 
 
    <div id="section4"> 
 
    </div> 
 
     <div id="section5"> 
 
    </div> 
 
     <div id="section6"> 
 
    </div> 
 
     </div>

來源

2017-02-07 20:35:42 Banzay

使用CSS類。以下內容將轉換應用於直接位於「包裝器」div下的所有塊元素。

CSS：

#wrapper div { 
    // applies to all divs under wrapper. 
    width:200px; 
    height:200px; 
    background:#41aacc; 
    margin:20px; 
    cursor:pointer; 
} 

#wrapper .hoverable:hover { 
    // applies only to "hoverable" class items when hovered. 
    transform:scale(1.1) 
}

HTML：

<div id="wrapper"> 
    <div id="section1" class="hoverable"></div> 
    <div id="section2" class="hoverable"></div> 
    <div id="section3" class="hoverable"></div> 
    <div id="section4" class="hoverable"></div> 
    <div id="section5" class="hoverable"></div> 
    <div id="section6" class="hoverable"></div> 
</div>

來源

2017-02-07 20:30:28 PaulProgrammer

使用

#wrapper > div:hover { 
    transform:scale(1.1) 
}

#section1,#section2,#section3 ,#section4,#section5,#section6{ 
 
     width:200px; 
 
     height:200px; 
 
     background:#41aacc; 
 
     margin:20px; 
 
     cursor:pointer; 
 
    } 
 
    #wrapper{ 
 
     width:60%; 
 
     margin:0 auto; 
 
     display:flex; 
 
     align-items:center; 
 
     justify-content:center; 
 
     flex-wrap:wrap; 
 
    } 
 
    #wrapper > div:hover { 
 
     transform:scale(1.1) 
 
    }

<div id="wrapper"> 
 
<div id="section1"> 
 
</div> 
 
<div id="section2"> 
 
</div> 
 
<div id="section3"> 
 
</div> 
 
<div id="section4"> 
 
</div> 
 
    <div id="section5"> 
 
</div> 
 
    <div id="section6"> 
 
</div> 
 
    </div>

來源

2017-02-07 20:34:22 Yousaf

徘徊在多個div

回答

相關問題