twitter bootstrap响应式菜单悬停

时间:2013-03-05 05:57:20

标签: twitter twitter-bootstrap hover navbar

如何在移动设备上查看菜单/导航栏的悬停文字颜色为白色。我试过调查bootstrap的css代码,但我找不到它。 Screen

1 个答案:

答案 0 :(得分:2)

您可以编写媒体查询以满足li元素的特定悬停状态,如:
Jsfiddle Demo

  @media (max-width: 767px) {

.navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: #888;/* change this color*/
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
color: #555555;
text-decoration: none;
  }
  } 
 @media (max-width: 767px) {

 .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
 background-color: #000;/*you can change this color to anything*/
  }
 }
  @media (max-width: 480px) {

     .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
 background-color: #000;/* you can change this color to anything */
}
}