html - 我想在父 div 中定位多个 div

Question

我从 3 个 div 组合创建了一个六边形。我想将鼠标悬停在六边形和所有 3 个 div 上以更改颜色。

<div class="hex" >
 <div class="left"  ></div>
   <div class="middle"  ></div>
  <div class="right"  ></div>
  </div>  




.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
    }

.hex .left {
    float: left;
    width: 0;
    border-right: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}

.hex .left:hover {
     border-right: 60px solid yellow; 
     }

.hex .middle {
    float: left;
    width: 124px;
    height: 208px;
    background: #6C6;
}

.hex .middle:hover {
background-color: yellow; 
 }

.hex .right {
    float: left;
    width: 0;
    border-left: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}


.hex .right:hover {
border-left:60px solid yellow; 
 }

如您所见，目前我只能针对六边形的每个元素，而不是整个六边形。

Answer 1

CSS 无法关联和组合分离的单个元素的:hover 状态。

在这种情况下，您可以将 :hover 状态关联到每个选择器中的整个 .hex 元素。在 :hover 之后，您可以添加更多子选择器:

.hex:hover .left

(而不是 .hex .left:hover )

完整代码:

.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
}

.hex .left {
    float: left;
    width: 0;
    border-right: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}

.hex:hover .left {
    border-right: 60px solid yellow; /* or simply: border-right-color: yellow; */
}

.hex .middle {
    float: left;
    width: 124px;
    height: 208px;
    background: #6C6;
}

.hex:hover .middle {
    background-color: yellow; 
}

.hex .right {
    float: left;
    width: 0;
    border-left: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}


.hex:hover .right {
    border-left: 60px solid yellow; /* or simply: border-left-color: yellow; */
}

<div class="hex">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>