CSS在引导标签控件上悬停标签时改变标签

以下是垂直对齐的Boostrap标签控件 - 样本（裸露骨骼 - 这是一个工作样本）的html代码。它似乎是悬停在它上面的标签的默认颜色是浅灰色（我从boostrap.min.css猜测）。有没有一种方法可以将我的css中的颜色从浅灰色改为其他颜色？喜欢重写默认颜色（如果是这样）？这是什么css？CSS在引导标签控件上悬停标签时改变标签

<html> 
<head runat="server"> 
<title></title> 

<link rel="stylesheet prefetch" href="bootstrap.min.css" /> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap.min.js"></script> 

    <style type="text/css"> 
      .tabs-left > .nav-tabs > li, 
      .tabs-right > .nav-tabs > li { 
       float: none; 
      } 

      .tabs-left > .nav-tabs > li > a, 
      .tabs-right > .nav-tabs > li > a { 
       min-width: 74px; 
       margin-right: 0; 
       margin-bottom: 3px; 
      } 

      .tabs-left > .nav-tabs { 
       float: left; 
       margin-right: 19px; 
       border-right: 1px solid #ddd; 
      } 

      .tabs-left > .nav-tabs > li > a { 
       margin-right: -1px; 
       -webkit-border-radius: 4px 0 0 4px; 
       -moz-border-radius: 4px 0 0 4px; 
         border-radius: 4px 0 0 4px; 
      } 

      .tabs-left > .nav-tabs .active > a, 
      .tabs-left > .nav-tabs .active > a:hover, 
      .tabs-left > .nav-tabs .active > a:focus {         
       border-color: red blue red red; 
       *border-right-color: lime; 
      } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <div class="container">  
     <div><h3>Tabs - vertical</h3> 
      <div class="tabbable tabs-left"> 
      <ul class="nav nav-tabs"> 
       <li style="background-color:orange;"><a href="#a" data-toggle="tab">One</a></li> 
       <li style="background-color:orange;" class="active"><a href="#b" data-toggle="tab">Two</a></li> 
       <li style="background-color:orange;"><a href="#c" data-toggle="tab">Three</a></li> 
      </ul> 
      <div class="tab-content"> 
      <div class="tab-pane" id="a"> --A) testing row A</div> 
      <div class="tab-pane active" id="b"> --B) testing row B</div> 
      <div class="tab-pane" id="c"> --C) testing row C </div> 
       </div> 
       </div>  
      </div>  
     </div> 
    </form> 
</body> 
</html>

来源

2017-05-08 Rich P

它必须是CSS就可以使用JavaScript？ –

你可以设置一个JsFiddle吗？ – andre3wap

您正在寻找background-color：

.tabs-left > .nav > li > a:hover { 
    background-color: red; 
}

来源

2017-05-08 19:52:29

谢谢你的回复。这个伎俩。 –

CSS代表级联样式表，因此在页面的下方指定的规则将覆盖上述规则。但是，您可以通过几种方式更改这些方法，但是无法访问来自其他人的样式表（如引导程序）时。

1）最具体的规则获胜。所以，

h1 span:hover { 
    color: blue; 
} 

span:hover { 
    color: red; 
}

将意味着由span的h1标签内包围的文字是蓝色的，当你在它悬停，即使span风格是事后声明。 h1 span比span更具体，所以它的权重更大。

2）你可以在属性声明的最后敲击!important，但通常要避免这种情况，除非必须。所以，

h1 span:hover { 
    color: blue; 
} 

span:hover { 
    color: red !important; 
}

将意味着该文本是红色的，因为!important是更强，更难覆盖。

因此，对于您的情况，您只需要找出正在应用到悬停标签上的样式（右键单击它并检查样式窗格以查看它的定位方式），然后编写自己的样式规则在你的样式表中使用的特定程度高于引导程序的特定程度。

此外，它看起来像你有background-color设置为这些橙色标签的内联样式。内嵌样式，如!important也是非常重的，所以您将更难用CSS处理这些样式。如果可以的话，我会尝试将它们移动到类中（除非你只是为了这个问题而做了这个，然后忽略这个部分）。

来源

2017-05-08 19:47:54

谢谢你的洞察力。我已经按照建议应用了它。更好的方式去默认的背景颜色。 –

CSS在引导标签控件上悬停标签时改变标签

回答

相关问题