リストされたアイテムをホバリングしながらドロップダウンボタンの色を設定します

以下のドロップダウンボタン（JSBin）を作成しました。現在、ドロップダウンリストが開いていて、リストされたアイテムにカーソルを合わせると、ボタン自体の色が濃い青色に変わります。私はこれが起こるのを望んでいない。色を#1abc9cに変更します。誰もこれを行う方法を知っていますか？リストされたアイテムをホバリングしながらドロップダウンボタンの色を設定します

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style>  
    .rb .btn.btn-primary { 
     background-color: #1abc9c; 
     border-color: white 
    } 

    .rb .btn.btn-primary:hover { 
     background-color: #2fe2bf; 
    } 

    .rb .btn.btn-primary:focus { 
     outline: none; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 

    .rb .btn.btn-primary:active { 
     border-color: white; 
     background-color: #1abc9c; 
    } 

    .rb .dropdown-toggle { 
     border-color: white !important; 
    } 
    </style> 
</head> 
<body> 
    <div class="rb"> 
    <div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#">HTML</a></li> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">JavaScript</a></li> 
     </ul> 
    </div> 
    </div> 
</body> 
</html>

編集1：私はより良いバージョンhereを持っています。上のnormalボタンを押している間、色が少し濃い青色に変わっているのがわかります。プレスを離すと、色が明るい青色に戻ります。ドロップダウンボタンで同じ効果を得たい：すなわち、ボタン==>少し濃い青==>ボタンを放す==>より明るい青とドロップダウンリスト==>ボタンを押す== >少し濃い青色==>ボタンを放す==>より明るい青色になり、ドロップダウンリストは非表示になります。

誰でも知ることができますか？

出典

2017-03-23 SoftTimur

ユーザーが再度クリックするまで、同じ色にしたいですか？ – Kwestion

OPの最後に私の最後の編集を見てください... – SoftTimur

はい可能です。私が与えた最初の答えと同じように、開発ツールを使ってボタンの状態を調べ、色を変更したい各状態で編集する必要があります。 – Kwestion

私はそれはあなたに役立つことを願って、これを試してみてください。

.rb .dropdown:active .btn-primary:active { 
    background-color: #1abc9c !important; 
}

出典

2017-03-28 12:11:10 Rohan

はい、それは動作します... [JSBin]（https://jsbin.com/rohocimoqa/1/edit?html,output） – SoftTimur

あなたはそれが

.open>.dropdown-toggle.btn-primary:focus { 
     background-color: #1abc9c; 
}

があなたのCSSでそれを試してみてください。この場合には、変更したいDOM要素の状態を分離することができますし、それが動作を確認できクロム開発ツールを使用して

出典

2017-03-23 23:59:53 Kwestion

ありがとうございます...私の更新を見てください... – SoftTimur

ブートストラップを使用しているので正常です。ボタンがフォーカスされている場合は、ブートストラップは、このルールを追加します。background-color: #204d74;

だから、あなたはそれがこのよう:focusだとき、あなたの.btn-primaryにbackground-color:#1abc9cを追加する必要があります。

.rb .btn.btn-primary:focus { 
    outline: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    background-color:#1abc9c; 
}

出典

2017-03-28 11:34:36

リストされたアイテムをホバリングしながらドロップダウンボタンの色を設定します

答えて

関連する問題