html - CSS-在悬停时同时更改子项和父项

Question

所以我有两个类:parent 和child。parent 类基本上是一个 Square，child 类包含 Square 中的文本。我正在努力改变parent 的背景色和 child 悬停在父级上时的文本颜色。这是我目前所拥有的，它只改变了 parent 的背景颜色:

.parent:hover {
    background-color: #FFCC00;
}

我也试过了，但没用:

.panel-body:hover .child {
    background-color: #FFCC00;
    color: #FFFFFF;
}

编辑:因为没有任何解决方案有效。我正在添加 HTML 代码段。

<div class="parent">
    <span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
        <div class="child ng-binding">
             Child Text needing color change
         </div>
         <div class="child-2 ng-scope">
             No change needed for this text
         </div>
</div>

Answer 1

我相信你想要像这样结合你的两种尝试:

.parent:hover {
  background-color: #FFCC00;
}
.parent:hover .child {
  color: #FFFFFF;
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
    </script>
<div class="parent">
  <span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
  <div class="child ng-binding">
    Child Text needing color change
  </div>
  <div class="child-2 ng-scope">
    No change needed for this text
  </div>
</div>