如何防止按钮出现悬停答案

【问题标题】：How to prevent button from appearing hovered如何防止按钮出现悬停
【发布时间】：2014-12-30 16:03:46
【问题描述】：

（请参阅此链接到 jsfiddle - http://jsfiddle.net/AshThomas/742tvhqy/1/)

你好，

如果此代码在计算机上运行...当单击菜单按钮时，该按钮仍会显示为“悬停”，直到光标移动（即，如果您单击按钮但不移动光标，则按钮仍然出现“悬停”）

此外，如果此代码在三星 Galaxy S3 Mini 的标准互联网浏览器上运行（对于其他 Android 手机可能也是如此），即使菜单按钮仅按下一次，菜单也会立即打开然后关闭。

我相信这两个事件是相关的，但我似乎找不到解决方案。

基本上，我希望在单击按钮后阻止菜单按钮出现“悬停”（并且无需移动光标），并且我希望在手机上按下菜单按钮时菜单保持打开状态上面提到...希望这两个问题是相关的！

<body>
  <div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed; 
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease; 
transition: right 300ms ease; right: -15.625em;  -webkit-overflow-scrolling: touch;">
    <div id="menuWrapper">
      <ul>
        <li class="boldMenu"><a href="#">Home</a>
        </li>
        <li class="boldMenu"><a href="#">About</a>
        </li>
        <li class="boldMenu"><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>



  <div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">

    <a href="#menu" class="menu-link">☰</a>
  </div>

【问题讨论】：

我无法重现这个。当我在 FF 中使用你的小提琴时，使用按钮返回状态没有问题。
Chrome 有这个问题。
这是一个很好的问题，因为它在所有移动的元素上都是这样的。在鼠标移动之前，此元素将保持其状态。
你说得对，FF不会出现这个问题。但是，它至少存在于 Chrome 和 Safari 中。
我修复了打开部分：jsfiddle.net/742tvhqy/3 不知道如何修复关闭。

标签： javascript jquery html css menu

【解决方案1】：

我已经解决了您的问题。我猜这是浏览器的错误，因为它不会在动画后重新渲染 DOM 元素。

http://jsfiddle.net/742tvhqy/4/

查看第 104 行

menuLink.on('click.bigSlide', function(e) {
  e.preventDefault();
  if (menu._state === 'closed') {
    menu.open();
  } else {
    menu.close();
  }
   menuLink.fadeOut(5).fadeIn(10);
});

你看到最后一行的淡出/淡入了吗？这就是修复。我试过 hide().show();但它不起作用，即使我使用fadeOut(1) 它也不起作用:) 但很常见，5ms 与 1ms 相同。我现在想不出更好的解决方案。它有效。

顺便说一句。在你的位置，我会用几行 jQuery 代码而不是所有花哨的 css 动画来完成所有这些工作..

【讨论】：

【解决方案2】：

也许可以这样做...向按钮添加另一个类并在 css 中为该类提供悬停属性...

menu-link-class:hover {...}

然后在你的 js 中执行此操作

$('.menu-link').click(function() {
    var me = $(this);
    me.removeClass('menu-link-class');
    setTimeout(function() {
        me.addClass('menu-link-class');
    },1);
});

更新：特别感谢@Lukas Liesis

你有 2 个选择:)

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.fadeOut(5).fadeIn(10);
});

或

menuLink.on('click.bigSlide', function(e) {
    e.preventDefault();
    if (menu._state === 'closed') {
        menu.open();
    } else {
        menu.close();
    }
    menuLink.removeClass('menu-link-class');
    setTimeout(function() {
        menuLink.addClass('menu-link-class');
    },1);
});

【讨论】：