徘徊在多个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

回答

相关问题