申请时
.chats a:hover {
background-color: #3399ff;
color: white;
}
到：
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'</span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
只有班级.sender才会获得白色。所有其他内容，glyphicon，<p>和.timestamp在悬停时保持不变。这是为什么？
.glyphicon-user {
font-size: 25px;
color: #3399ff;
margin-left: 15px;
}
.panel-heading h1 {
padding-bottom: 0.65em;
color: #3399ff;
font-weight: bold;
}
.panel-body {
padding: 0;
}
.col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.chats {
list-style-type: none;
margin: 0;
padding: 0;
}
.chats li {
border-bottom: 2px solid #eee;
}
.chats a {
display: block;
color: #000;
text-decoration: none;
height: 85px;
padding: 15px 0;
}
.chats a:hover {
background-color: #3399ff;
color: white;
}
.chats .sender {
margin-left: 10px;
}
.chats .timestamp {
margin-right: 15px;
}
.chats .chat-sample {
clear: right;
margin-left: 50px;
padding-top: 5px;
margin-right: 15px;
}
.chats:last-child {
margin-bottom: 15px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-xs-12 col-centered'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='btn-group pull-left'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-cog'</span>
</button>
<ul class='dropdown-menu'>
<li><a href='#'>Delete All Chats</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</div>
</div>
<div class='btn-group pull-right'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-plus'></span>
</button>
<ul class='dropdown-menu dropdown-menu-right'>
<li><a href='#'>New Chat</a></li>
</ul>
</div>
</div>
<h1 class='panel-title text-center'>FunChat</h1>
</div>
<div class='panel-body'>
<ul class='chats'>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'</span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'</span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'</span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
</ul>
</div>
</div>
</div><!--end column-->
</div><!--end row 1-->
</div><!--end container-->
答案 0 :(得分：1)
立即尝试
a:hover > .glyphicon{
background-color: #3399ff;
color: white;
}
答案 1 :(得分：0)
尝试添加
.chats a:hover > *, .chats a:hover .glyphicon {
background-color: #3399ff;
color: white;
}
Bootstrap似乎为.text-muted和其他各种元素提供了一些样式，并优先于:hover，因为它更精确。上面的代码将覆盖Bootstrap样式。 （仅在悬停时）
.glyphicon-user {
font-size: 25px;
color: #3399ff;
margin-left: 15px;
}
.panel-heading h1 {
padding-bottom: 0.65em;
color: #3399ff;
font-weight: bold;
}
.panel-body {
padding: 0;
}
.col-xs-12 {
padding-left: 0;
padding-right: 0;
}
.chats {
list-style-type: none;
margin: 0;
padding: 0;
}
.chats li {
border-bottom: 2px solid #eee;
}
.chats a {
display: block;
color: #000;
text-decoration: none;
height: 85px;
padding: 15px 0;
}
.chats a:hover {
background-color: #3399ff;
color: white;
}
.chats a:hover > *, .chats a:hover .glyphicon {
background-color: #3399ff;
color: white;
}
.chats .sender {
margin-left: 10px;
}
.chats .timestamp {
margin-right: 15px;
}
.chats .chat-sample {
clear: right;
margin-left: 50px;
padding-top: 5px;
margin-right: 15px;
}
.chats:last-child {
margin-bottom: 15px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-xs-12 col-centered'>
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='btn-group pull-left'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-cog'></span>
</button>
<ul class='dropdown-menu'>
<li><a href='#'>Delete All Chats</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</div>
</div>
<div class='btn-group pull-right'>
<div class='dropdown'>
<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
<span class='glyphicon glyphicon-plus'></span>
</button>
<ul class='dropdown-menu dropdown-menu-right'>
<li><a href='#'>New Chat</a></li>
</ul>
</div>
</div>
<h1 class='panel-title text-center'>FunChat</h1>
</div>
<div class='panel-body'>
<ul class='chats'>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>John Appleseed</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>What time is it?</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Verizon Wireless</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p>
</a>
</li>
<li>
<a href=''>
<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
<div class='sender pull-left'><strong>Sergey Brin</strong></div>
<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div>
<p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--end column-->
</div>
<!--end row 1-->
</div>
<!--end container-->
答案 2 :(得分：0)
如果要对所有图标使用相同的样式，请尝试此操作：
.chats a:hover span.glyphicon {
background-color: #3399ff;
color: white;
}
如果你想为个人图标设置不同的样式：
.chats a:hover span.your_glyphicon_name {
background-color: #3399ff;
color: white;
}
答案 3 :(得分：0)
将此添加到CSS
.chats a:hover > *,
.chats a:hover .glyphicon {
background-color: #3399ff;
color: white;
}