Question

我想让你的多边形的每个3个元素（顶部，中间和底部）在悬停在它上面时会改变颜色。我通常会用css：xxx:hover来做，但由于它涉及需要同时更改的3个不同元素，我只能假设我需要采用不同的方法。我假设某种javascript？想法？

CODEPEN：http://codepen.io/anon/pen/shfge

HTML

<div class="hex-row even">
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</div>
<div class="hex-row">
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
  <div class="hex">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</div>

CSS：

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex:hover {
  cursor: pointer;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}

Answer 1

不太难，只是针对.hex容器，它的孩子就像这样：

.hex:hover .top {
  border-bottom-color: red;
}

.hex:hover .middle {
 background: Red;
}

.hex:hover .bottom {
  border-top-color: red;  
}

http://codepen.io/anon/pen/GboDw

如何在多个元素上更改css

1 个答案: