CSSのホバリング、フォーカスと "フォーカスのない"

Question

私はブートストラップを使用してカスタムメニューアニメーションを作成しようとしています。私は3つのステージを持っていたいと思います。最初にホバリングされたとき、フォーカスされたとき（メニューアイコンが押されたとき）、フォーカスが外れているとき（メニューアイコンが再び押されたとき）、最後にフォーカスされます。

メニュー：メニューが押されたときにホバー第バー

#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(1) { 
 
    display: block; 
 
    width: 3em; 
 
    margin: 0.3em; 
 
    border: 0.1em solid white; 
 
    transition-duration: 600ms; 
 
} 
 

 
#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(2) { 
 
    display: block; 
 
    width: 1em; 
 
    margin-left: 2.7em; 
 
    transform: rotate(90deg); 
 
    border: 0.1em solid white; 
 
    transition-duration: 600ms; 
 
} 
 

 
#custom-bootstrap-menu.navbar-default .navbar-toggle .bar:nth-of-type(3) { 
 
    display: block; 
 
    width: 3em; 
 
    margin: 0.3em; 
 
    border: 0.1em solid white; 
 
    transition-duration: 600ms; 
 
    margin-right:0.5em; 
 
} 
 

 
CSS animation on hover: 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .bar:nth-of-type(2) { 
 
    margin-left: 1.4em; 
 
} 
 

 
CSS animation on focus: 
 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .bar:nth-of-type(2) { 
 
    margin-left: -0.1em; 
 
}

<nav id="custom-bootstrap-menu" class=" navbar navbar-default navbar-static-top" role="navigation"> 
 
    <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
 
\t \t \t \t <span class="bar"></span> 
 
\t \t \t \t <span class="bar"></span> 
 
\t \t \t \t <span class="bar"></span> 
 
\t \t \t </button> 
 
\t </div> 
 
</nav>

が右から中央へ移動され、その後、バーが左に移動します。私の問題は、フォーカスされているので何も起こっていない（バーはまだ左側にある）ので、メニューのフォーカスを外してプロセスをリセットする必要があるということです。

メニューアイコンをもう一度押すと、同じことが起こりますので、2回目に押すとアイコンを非表示にします（バーは右側に移動する必要があります）。

Answer 1

私の解決方法では、ボタンの「フォーカス」状態をクリアするための「onmouseenter」ハンドラを追加します。あなたはトグルボタンをしたい場合は、現在の「ホバー」変更は混乱して

<script> 
function losefocus(target) { 
    target.blur(); 
} 
</script> 
<nav id="custom-bootstrap-menu" class=" navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="navbar-header"> 
    <button id="mb" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" onmouseenter="losefocus(this)"> 
        <span class="bar"></span> 
        <span class="bar"></span> 
        <span class="bar"></span> 
    </button> 
    </div> 
</nav> 

：あなたはこれを試して、onloadイベントではなく、それは最も単純な形式だでボタンに、このイベントハンドラを追加する必要があります。ホバリングを示すために中央に移動するbar（2）以外のものを使用することをお勧めしますので、ボタンのフォーカス/非合焦状態は常に明白です。

<script> 
var isfocused = 0; 
function toggle(target) { 
    isfocused = (isfocused + 1) % 2; 
    if (isfocused) { 
     target.focus(); 
    } else { 
     target.blur(); 
    }  
} 
</script> 
<nav id="custom-bootstrap-menu" class=" navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="navbar-header"> 
    <button id="mb" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" onclick="toggle(this)" > 
        <span class="bar"></span> 
        <span class="bar"></span> 
        <span class="bar"></span> 
    </button> 
    </div> 
</nav> 

：例として、それは部分的にしか機能しますが、この

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .bar:nth-of-type(2) { 
border: 0.1em solid black; 
}