html - 如何在子元素上触发 self 悬停

Question

我有 4 个 div，一个在另一个里面。当我将鼠标悬停在最内部的 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

.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;
}

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