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

我相信你想要两种尝试的结合：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

为什么你不喜欢这样：

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

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

Answer 3

您可以使用：

.parent:hover .child { 
   color: #FFFFFF;
}

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

Answer 4

这个工作正常，你需要做的是使用两个块。

route('foo.bar')

Answer 5

尝试使用此css，这将在悬停父div时更改子元素的颜色

   .parent:hover .child 
    {
    color:#fff;
    }


    .parent:hover .child-2
    {
    color:red;
    }

CSS-在悬停时更改子级和父级

5 个答案: