ブートストラップのナビゲーションバーの項目がフォーカスを失うと色が変わる

Question

私はブートストラップメニューバーに次の問題があります。 "サインイン"をクリックし、 "En"リンクをクリックするとサインインリンクが黒くなります。

背景色を#ee4035に設定しました また、ホバー/フォーカスのプロパティを試しました。

私が逃したものについてのアイデアはありますか？ここで

は私のhtmlのコピーです： https://jsfiddle.net/ebj2zt72/

おかげ

<style> 
    .navbar { 
    min-height: 80px; 
    background: #ee4035; 
    border-width: 0px; 
    border-radius: 0px; 
    color: blue; 
    } 

    .navbar a { 
    color: white!important; 
    } 

    .navbar-brand { 
    padding: 0 15px; 
    height: 80px; 
    line-height: 80px; 
    color: white; 
    } 

    .navbar-toggle { 
    /* (80px - button height 34px)/2 = 23px */ 
    margin-top: 23px; 
    padding: 9px 10px !important; 
    } 

    .navbar-btn { 
    /* (80px - button height 34px)/2 = 23px */ 
    margin-top: 18px; 
    margin-right: 30px; 
    padding: 9px 10px !important; 
    background: #f37736; 
    border-width: 0px; 
    } 

    .navbar-text { 
    margin-top: 28px; 
    color: white; 
    } 

    .nav.navbar-nav.navbar-right li a { 
    color: white; 
    } 

    .dropdown-menu { 
    background: #ee4035; 
    } 

    .dropdown-menu > li > a:hover, 
    .dropdown-menu > li > a:focus { 
    background-color: #d6392f; 
    } 

    .navbar-inverse .navbar-nav > li.dropdown:hover > a, 
    .navbar-inverse .navbar-nav > li.dropdown:hover > a:hover, 
    .navbar-inverse .navbar-nav > li.dropdown:hover > a:focus { 
    background-color: #d6392f; 
    } 
</style> 



<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">logo</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 

     <ul class="nav navbar-nav navbar-right"> 
     <li class="inline"> 
      <p class="navbar-text" style="color:white"><strong>goodmorning? </strong></p> 
     </li> 
     <li> 
      <button class="btn btn-danger navbar-btn"> Click me</button> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> Sign in</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
      <li><a href="#">C</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" id="lang-selector" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-globe"></span> En <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">English</a></li> 
      <li><a href="#">Ellinika</a></li> 
      <li><a href="#">Italian</a></li> 
      </ul> 
     </li> 

     </ul> 
    </div> 
    </div> 
</nav> 

    </body> 

</html> 

Answer 1

あなたの問題は、あなたがドンリンク変更の色や他の言葉でをさせたくないということであれば」あなたのリンク上でスタイリングを見たい場合は、あなたがリンクしているかどうかを確認したい場合は、使用しているクラスを手動で変更するか、インラインスタイリングを提供する場合は手動で変更します.cssファイルまたはスタイルタグの中で提供したすべてのスタイリング）さまざまな状況で出現する。 あなたが私がより効率的に助けてくれるようにするなら、あなたのjsfiddleファイルを編集してください。それは空であり、あなたの問題文からあまり明確ではないので。

リンクの黒化については、ブートストラップクラスがブートストラップCSSの背景色を設定するため、ブートストラップクラスをグリッジとして直接使用することがあります。したがって、すでに設定されている背景色を切り替えると表示されます。あなたはそれを好きなように設定する必要があります。

たとえば、ドロップダウントグルクラスのデフォルトの色がbackground-colorに設定されている場合、＃111111; /または＃e5e5e5仮想的には、ホバーに暗い色が出る理由です。