将鼠标悬停在多个div

Question

我有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进行迭代的情况下实现它。 提前谢谢。

Answer 1

使用

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

Answer 2

使用CSS类。以下将转换应用于直接在＆＃34;包装器＆＃34;下的所有块元素。格。

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>

Answer 3

你需要写

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

此选择器将获取id值以＆＃34; section＆＃34;

开头的所有div

或更具体的

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

看一下片段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;