Does：ホバーは次のように特化して作業しますか？

Question

これは私の問題です。私はinput-group-addonのアイコン（検索アイコン、カレンダーアイコンなど）を保持し、入力フィールドのホバー、フォーカス、アクティブ状態を特異性で継承したいと考えています。私はホバーのために働いているが、何らかの理由で特異性がフォーカス状態を無視している。私はそれが私のコードでは矛盾したCSSのディレクティブだと思ったが、私はCODEPENの問題を切り離した。

要約すると、入力フィールドアドオンボーダーは、入力フィールド（タブまたはクリック）にマウスを重ねると、その入力フィールドとシームレスに黄色に変化します。

マイHTML：

マイCSS（使用クローム可能ならば、私はそれが単純読むために作るためにここにcorssbrowserのものが含まれていませんでした。）また、これはもともとSCSSの上に構築されています：ホバー/フォーカス/アクティブ

に

.mar40 { 
    margin: 40px auto; 
} 

.form-control { 
    border-width: 2px; 
    border-color: #8f8f8f; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    color: #bbbbbb; 
    -webkit-border-radius: 34px; 
    -moz-border-radius: 34px; 
    -ms-border-radius: 34px; 
    border-radius: 34px; 
    background: #211E1E; 
} 

.form-control:focus, 
.form-control:hover { 
    border-color: rgba(248, 151, 29, 0.77); 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    outline: none; 
    transition: all 1s ease; 
} 

.form-control .input-group-addon { 
    background: #8f8f8f; 
    border-color: #555555; 
    border-width: 2px; 
} 

.controls .input-group-addon.right.search { 
    background: #30373e; 
    border: 2px solid #8f8f8f; 
    color: #bbbbbb; 
    border-left: none; 
    border-radius: 0px 20px 20px 0; 
    padding: 4px 10px; 
    min-width: 0; 
} 

.controls .input-group-addon.right.search:before { 
    content: "\f4a4"; 
    font-family: 'Ionicons'; 
    font-size: 16px; 
} 

.controls:focus .input-group-addon.right, 
.controls:hover .input-group-addon.right, 
.controls:active .input-group-addon.right { 
    border: 2px solid rgba(248, 151, 29, 0.77) !important; 
    border-left: none !important; 
    transition: all 1s ease; 
} 

.controls:focus .input-group-addon.right:before, 
.controls:hover .input-group-addon.right:before, 
.controls:active .input-group-addon.right:before { 
    color: rgba(248, 151, 29, 0.77); 
    transition: all 1s ease; 
} 

所望の効果イラスト

これは私が焦点

と便利なダンディCODEPEN

おかげで取得していますものです！

Answer 1

:focusは、親コンテナではなくinputに適用されるため、セレクタグループは次のようになります。 （注最初の行で変更されたセレクタ）私の知る限りでは

.form-control:focus + .input-group-addon.right, 
.controls:hover .input-group-addon.right, 
.controls:active .input-group-addon.right { 
    border: 2px solid rgba(248, 151, 29, 0.77) !important; 
    border-left: none !important; 
    transition: all 1s ease; 
} 

、とき:hoverあなたはまた、間接的に親にホバリングしていると.form-control:hoverが適用されるときに.controls:hover .input-group-addon.rightも働く子供。したがって、.form-controlと.input-group-addon.rightの両方が境界線を取得します。

しかし、.form-controlにフォーカスすると、フォーカスセレクタはinputにのみ適用され、そのコンテナには適用されません。したがって、.form-controlだけが境界線を取得し、.input-group-addonは取得しません。そのため、コンテナのフォーカスではなく、inputに基づいて.input-group-addonをスタイルするようにセレクタを変更する必要があります。

CodePen Demo