如何仅让汉堡按钮触发hover效果，关闭状态下不生效？

开发汉堡菜单按钮交互样式时，需要实现：hover状态下汉堡线条上下位移的效果仅在按钮为汉堡形态（菜单未展开）时生效，点击切换为关闭叉号（菜单展开）状态时，不触发该hover位移效果。
原有问题代码片段：

.btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
.btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}

现有交互逻辑：点击按钮会给body标签切换menu-open类，有该类时为关闭按钮状态，无该类时为汉堡按钮状态，对应现有代码如下：

$('.btn-menu').on('click', function() {
  $('body').toggleClass('menu-open');
});

.btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-left: 0;
  padding-right: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars {
  position: relative;
  width: 40px;
  height: 2px;
}
.btn-menu__bars:before, .btn-menu__bars:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.btn-menu__bars:before {
  transform: translate(0, -5px);
}
.btn-menu__bars:after {
  transform: translate(0, 5px);
}
.menu-open .btn-menu .btn-menu__bars:before {
  transform: rotate(45deg);
}
.menu-open .btn-menu .btn-menu__bars:after {
  transform: rotate(-45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-menu" type="button" style="background-color: red;">
  <i class="btn-menu__bars" aria-hidden="true"></i>
</button>

不需要修改现有JS逻辑，直接通过CSS的:not()伪类，限定hover效果仅在菜单未打开（无menu-open类）的状态下生效即可。
将原有hover效果的CSS选择器替换为如下代码：

/* 仅汉堡形态（菜单未展开）下生效hover位移效果 */
body:not(.menu-open) .btn-menu:hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
body:not(.menu-open) .btn-menu:hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}

实现原理 #

• 现有逻辑中body标签的menu-open类是两种按钮形态的唯一标识：类存在时按钮为关闭叉号形态，类不存在时为汉堡形态
• :not(.menu-open)选择器会排除掉body带有menu-open类的场景，此时hover规则不会匹配到元素，自然不会在关闭按钮状态下触发位移效果
• 该写法选择器权重和原有.menu-open下的叉号样式权重一致，且状态互斥，不会出现样式冲突问题

如果后续调整了类名挂载的元素（比如把menu-open类直接加在按钮本身而非body上），只需要对应修改选择器前缀即可，例如类挂载在按钮上时写法为：

.btn-menu:not(.menu-open):hover .btn-menu__bars::before{
  transform: translateY(-0.5875rem);
}
.btn-menu:not(.menu-open):hover .btn-menu__bars::after{
  transform: translateY(0.5875rem);
}

内容的提问来源于stack exchange，提问作者Ivan Moc's