如何防止按钮出现悬停

Question

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

嗨，您好，

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

此外，如果此代码在Samsung 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>

Answer 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);
});

你看到fadeOut / fadeIn的最后一行？ 这是解决方案。 我试过用hide（）。show（）; 但它不起作用，即使我使用fadeOut（1）它不起作用:)但常见的是，5ms与1ms相同。 我现在想不出更好的解决方案。 有用。

BTW。 在你的位置我会用几行jQuery代码完成所有这些东西而不是所有那些花哨的css动画的东西..

Answer 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);
});

如何防止按钮出现悬停

问题描述

2 个解决方案

解决方案1
1 2014-11-03 22:07:08

解决方案2
0 2014-11-03 22:08:20

如何防止按钮出现悬停

问题描述

2 个解决方案

解决方案1 1 2014-11-03 22:07:08

解决方案2 0 2014-11-03 22:08:20

解决方案1
1 2014-11-03 22:07:08

解决方案2
0 2014-11-03 22:08:20