如何对父级悬停时的子级应用CSS变换 [英] how to apply css transform to child on parent hover

问题描述

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

以下是JSFdle：http://jsfiddle.net/M6N24/715/

推荐答案

您可以使用以下解决方案(on JSFiddle)：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

这篇关于如何对父级悬停时的子级应用CSS变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！