CSS 悬停、焦点和 "unfocus"

Question

我正在尝试使用 Bootstrap 制作自定义菜单动画。我想分三个阶段。首先是悬停时，其次是聚焦时(按下菜单图标)，最后是未聚焦时(再次按下菜单图标)。

菜单:

#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">
			<button type="button" class="navbar-toggle"   data-toggle="collapse" data-target="#navHeaderCollapse">
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
			</button>
	</div>
</nav>

悬停时，第二个条从右侧移动到中间，然后当按下菜单时，条移动到左侧。我的问题是，如果您再次按下菜单图标，则不会发生任何事情(该栏仍在左侧)，因为它已被聚焦，因此您必须按其他地方才能取消聚焦菜单并重置该过程。

我希望在您再次按下菜单图标后发生同样的事情，以便在第二次按下时取消对图标的聚焦(栏应移至右侧)。

Answer 1

我的解决方案包括添加一个“onmouseenter”处理程序来清除按钮的“焦点”状态。您应该将此事件处理程序添加到 onload 中的按钮，但以最简单的形式，试试这个:

<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>

如果你想要一个切换按钮，当前的“悬停”变化令人困惑。我可以建议您使用移动到中心的 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>

:hover CSS 变成这样

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