如何在父盘旋上将css变换应用于子节点

Question

当悬停在li元素上时，我希望其边框颜色和子图标一起变换。

.list-group-item-card {
    transition: border-left-color 0.5s ease;
    transition: all 0.5s ease;
    border-left: 10px solid #bfbfbf !important;
}

.list-group-item-card:hover {
    border-left-color:  #9cbe4f !important;
}

.list-group-item-card .list-group-icon {
    transition: color 0.5s ease;
    color: #bfbfbf;
}

.list-group-item-card .list-group-icon:hover {
    color: #9cbe4f
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group" >
    <li class="list-group-item list-group-item-card">
        <div class="row">
            <div class="col-sm-2">
                <i class="fa fa-file fa-3x list-group-icon" aria-hidden="true"></i>
            </div>
            <div class="col-sm-10">
                Item One
            </div>
        </div>
    </li>
</ul>

这是JSFiddle：http://jsfiddle.net/M6N24/715/

Answer 1

http://jsfiddle.net/eec7ody8/

您可以使用：

.list-group-item-card:hover .list-group-icon {
    color: #9cbe4f
}

Answer 2

您可以使用以下解决方案（on JSFiddle）：

.list-group-item-card {
  transition:border-left-color 0.5s ease;
  transition:all 0.5s ease;
  border-left:10px solid #bfbfbf !important;
}
.list-group-item-card:hover {
  border-left-color:#9cbe4f !important;
}
.list-group-item-card .list-group-icon {
  transition:color 0.5s ease;
  color:#bfbfbf;
}
.list-group-item-card:hover .list-group-icon, 
.list-group-item-card .list-group-icon:hover {
  color:#9cbe4f
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group" >
  <li class="list-group-item list-group-item-card">
    <div class="row">
      <div class="col-sm-2">
        <i class="fa fa-file fa-3x list-group-icon" aria-hidden="true"></i>
      </div>
      <div class="col-sm-10">Item One</div>
    </div>
  </li>
</ul>

您只需要替换CSS规则

.list-group-item-card .list-group-icon:hover {
    color: #9cbe4f
}

以下

.list-group-item-card:hover .list-group-icon,
.list-group-item-card .list-group-icon:hover {
    color: #9cbe4f
}