web-dev-qa-db-ja.com

Bootstrapを使用して、ホバー時にアイコンバーの色を変更する

.icon-barクラスにカーソルを合わせると色が変わるようにしています。私は色を変えるトグルボタンとアイコンバーを使いました：

.navbar-preheader .navbar-toggle {
    border: 1px solid white;
    background-color: transparent;
    margin-right: 0;
}

.navbar-preheader .navbar-toggle:hover {
    background-color: #4d4d4d;
}

.navbar-preheader .navbar-toggle .icon-bar {
    background-color: white;
}

私が使用したホバーコードは次のとおりです。

.navbar-preheader .navbar-toggle .icon-bar:hover {
    background-color: #4d4d4d;
}

しかし、これは基本的に各アイコンバーの色を個別に変更します（以下を参照）が、それらはすべて一度に色を変更する必要があります...

enter image description hereenter image description here

私が見逃しているのはばかげていることだと確信していますが、どんな助けでも大歓迎です。ありがとうございました。

csstwitter-bootstraptwitter-bootstrap-3toggle
11
bobbyo23

親要素にカーソルを合わせたときに背景色を変更する必要があるため、:hover疑似クラスは.navbar-toggleではなく.icon-barの後に配置する必要があります。つまり、セレクタ.navbar-toggle:hover .icon-barを使用する必要があります。

ここの例

.navbar-preheader .navbar-toggle:hover .icon-bar {
    background-color: #4d4d4d;
}
19
Josh Crozier