如何在子元素上触发自我悬停

Question

我有4 divs个。当我鼠标悬停在大多数内部div上时，我想触发:hover，但它没有按预期工作。

我该如何解决这个问题？现场演示here

HTML就像这样。

<div class="orange">
  <div class="white">
     <div class="green">
       <div class="blue">

      </div>
    </div>
  </div>
</div>

CSS就像这样。

.orange:hover .blue {
    background-color: orange;
}
.white:hover .blue {
    background-color: white;
}
.green:hover .blue {
    background-color: green;
}
.blue:hover{
    background-color:blue;
}
.orange
{
  position:fixed; top:0; left:0;
  border-style: solid;
  border-width: 1px;
  height:400px;
  width:400px;
  background-color:orange;
}
.white
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:300px;
  width:300px;
  background-color:white;
}
.green
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:200px;
  width:200px;
  background-color:green;
}
.blue
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:100px;
  width:100px;
  background-color:blue;
}

Answer 1

制作!important将解决您的问题。但使用!important对您来说有多大灵活性，这取决于您的代码
请参阅fiddle

＆＃13;

＆＃13;

.orange:hover .blue {
    background-color: orange;
}
.white:hover .blue {
    background-color: white;
}
.green:hover .blue {
    background-color: green;
}
.blue:hover{
background-color:blue !important;
}
.orange
{
  position:fixed; top:0; left:0;
  border-style: solid;
  border-width: 1px;
  height:400px;
  width:400px;
  background-color:orange;
}
.white
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:300px;
  width:300px;
  background-color:white;
}
.green
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:200px;
  width:200px;
  background-color:green;
}
.blue
{
  top: 50px; margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height:100px;
  width:100px;
  background-color:blue;
}

＆＃13;

<div onmouseover="chbg('red')" class="orange">
  <div class="white">
     <div class="green">
       <div class="blue">
        
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加另一个在最内圈中受影响的类。它就是这样发生的，因为你的类是嵌套的。

CSS

.orange:hover .inner {
  background-color: orange;
}

.white:hover .inner {
  background-color: white;
}

.green:hover .inner {
  background-color: green;
}

.blue:hover .inner {
  background-color: blue;
}


.inner {
  top: 0px;
  margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: 0px;
  height: 100px;
  width: 100px;
  background-color: white;
}

HTML

<div onmouseover="chbg('red')" class="orange">
  <div class="white">
    <div class="green">
      <div class="blue">
        <div class="inner">

        </div>
      </div>
    </div>
  </div>
</div>

保留其余的颜色类。