我有以下情况:
我正在使用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中,请大家好听。
答案 0 :(得分: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;
}
.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;
答案 1 :(得分:1)
只需在悬停时触发h4
:
.list-group-item-switchhon-blog:hover h4{
transition: all 0.5s ease;
color: #fff;
}
更新
更好的方法是将h4
设置为继承其父级的颜色:
.list-group-item-switchhon-blog h4{
color: inherit !important;
}
这样您就不必重复代码并为悬停添加额外代码