Question

我有以下情况：

我正在使用bootstrap开发此站点。当我将鼠标悬停在一个列表组中时，一切都被认为是一个蓝色背景颜色，文本应该变成白色。虽然样式不适用于H4，但它仍然有效。

这是css代码：

.styled-group-right-item{
    padding: 20px;
    margin-left: 100px;
}
.limited-list-group{
    height: auto;
    max-height: 500px;
    overflow-y: scroll;
}
.author-pubdate-info{
    font-weight: bold;
}
.list-group-item-switchhon-blog:hover{
    transition: all 0.5s ease !important;
    color: #fff !important;
    background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog{
    transition: all 0.5s ease;
}

这是标记：

<div class="list-group limited-list-group">
                    <a href="#" class="list-group-item clearfix list-group-item-switchhon-blog">
                       <div class="pull-left">
                           <img src="http://placehold.it/100x100" class="btn-center">
                       </div> 
                        <div class="styled-group-right-item">
                            <h4 class="list-group-item-heading">Lorem Ipsum Dolor Sit Amet</h4>
                            <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget interdum libero. Vivamus pharetra faucibus.</p>
                            <span class="author-pubdate-info">Autor: John Doe | Fecha: 11 de Noviembre de 2014</span>
                        </div>
                    </a>
                </div>

这是一个小提琴：http://jsfiddle.net/y7d5fm1w/

到目前为止我尝试过：添加另一个类：

.list-group-item-switchhon-blog:hover h4{
    transition: all 0.5s ease !important;
    color: #fff !important;
    background-color: #2980b9 !important;
}

但是这会产生一种非常有趣的效果，试试小提琴，这并不好。

如何将这些款式应用到h4中，请大家好听。

Answer 1

将样式应用于h4 以及。 此外，将transition置于非悬停状态;这可确保转换将应用于悬停状态和退出状态。

旁白：如果您将overflow-y: scroll更改为overflow-y: auto，则只有在内容实际溢出时才能获得滚动条。

更改

.list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 { /* transition here */
 transition: all 0.5s ease !important;
}
.list-group-item-switchhon-blog:hover {
    color: #fff !important;
    background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog:hover h4 { /* add this */
    color: #fff !important;
}

工作示例

＆＃13;

.styled-group-right-item {
  padding: 20px;
  margin-left: 100px;
}
.limited-list-group {
  height: auto;
  max-height: 500px;
  overflow-y: auto;
}
.author-pubdate-info {
  font-weight: bold !important;
}
.list-group-item-switchhon-blog, .list-group-item-switchhon-blog h4 {
  transition: all 0.5s ease !important;
}
.list-group-item-switchhon-blog:hover {
  color: #fff !important;
  background-color: #2980b9 !important;
}
.list-group-item-switchhon-blog:hover h4 {
  color: #fff !important;
}
.list-group-item-switchhon-blog {
  transition: all 0.5s ease;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-group limited-list-group">
  <a href="#" class="list-group-item clearfix list-group-item-switchhon-blog">
    <div class="pull-left">
      <img src="http://placehold.it/100x100" class="btn-center">
    </div>
    <div class="styled-group-right-item">
      <h4 class="list-group-item-heading">Lorem Ipsum Dolor Sit Amet</h4>
      <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget interdum libero. Vivamus pharetra faucibus.</p>
      <span class="author-pubdate-info">Autor: John Doe | Fecha: 11 de Noviembre de 2014</span>
    </div>
  </a>
</div>

＆＃13;

Answer 2

只需在悬停时触发h4：

.list-group-item-switchhon-blog:hover h4{
  transition: all 0.5s ease;
  color: #fff;
}

FIDDLE

更新

更好的方法是将h4设置为继承其父级的颜色：

.list-group-item-switchhon-blog h4{
 color: inherit !important;
}

这样您就不必重复代码并为悬停添加额外代码

NEW FIDDLE

CSS悬停效果适用于除h4之外的所有内容

2 个答案:

更改

工作示例