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

也许是{p> .hex:hover div { }？我认为这不会适用于某些旧版本的IE。

Answer 2

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>

Answer 3

您可以使用currentcolor

＆＃13;

.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
    color:#6C6;
    }

.hex .left {
    float: left;
    width: 0;
    border-right: 60px solid currentcolor;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}


.hex .middle {
    float: left;
    width: 124px;
    height: 208px;
    background: currentcolor;
}

.hex .right {
    float: left;
    width: 0;
    border-left: 60px solid currentcolor;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}


.hex:hover .right{
border-left-color:yellow; 
 }
.hex:hover .left{
border-right-color:yellow; 
 }
.hex:hover .middle{
   color:yellow; 
 }

＆＃13;

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

＆＃13;

或使用pseudo elements

＆＃13;

.hex {
    width:125px;
    height:208px;
    position:relative;
    background-color:#6C6;
    margin:20px auto
    }
.hex:before,.hex:after{
    content:'';
    position:absolute;
    width: 0;
    height:0
}
.hex:before {
    left:-60px;
    border-right: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}
.hex:after {
    right:-60px;
    border-left: 60px solid #6C6;
    border-top: 104px solid transparent;
    border-bottom: 104px solid transparent;
}

.hex:hover{
   background-color:yellow; 
 }
.hex:hover:before{
   color:yellow; 
   border-right-color:yellow; 
 }
.hex:hover:after{
   border-left-color:yellow; 
 }

＆＃13;

<div class="hex" ></div>

＆＃13;

Answer 4

这个怎么样：

 .hex{transition:875ms ease all;}
  .hex:hover div{
    background:red;
    }

我想在父div中定位多个div

4 个答案: