使用引导程序3,我自定义了这样的列表组:
<div class="list-group">
<a class="list-group-item list-group-item-mine"href="/path"><strong>Item 1</strong></a>
<a class="list-group-item list-group-item-mine"href="/path"><strong>Item 2</strong></a>
<a class="list-group-item list-group-item-mine"href="/path"><strong>Item 3</strong></a>
</div>
的CSS
.list-group-item-mine {
background-color: #f1f9fb;
border-top: 1px solid #0091b5;
border-left-color: #fff;
border-right-color: #fff;
}
.list-group-item-mine a:hover {
background-color: red;
}
问题是,悬停时,默认情况下,列表组项仍变为灰色,而我需要将它们变为红色。我怎样才能解决这个问题?
在父级.list-group-mine
而不是子级上使用您的自定义类...这将使您更好地控制内部元素的样式
堆栈片段
.list-group-mine .list-group-item {
background-color: #f1f9fb;
border-top: 1px solid #0091b5;
border-left-color: #fff;
border-right-color: #fff;
}
.list-group-mine .list-group-item:hover {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="list-group list-group-mine">
<a class="list-group-item" href="/path"><strong>Item 1</strong></a>
<a class="list-group-item" href="/path"><strong>Item 2</strong></a>
<a class="list-group-item" href="/path"><strong>Item 3</strong></a>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句