logo标签列表

如何防止按钮出现悬停状态

javascriptjqueryhtmlcssmenu
3
请查看此链接至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>
我无法重现这个问题。当我在Firefox中使用你的fiddle时，按下按钮返回状态没有任何问题。 - Phlume
1
谷歌浏览器存在此问题。 - dfsq
这是一个好问题，因为所有移动的元素都会像这样。这个元素将保持它们的状态，直到鼠标移动。 - Mephiztopheles
你说得对，这个问题在FF中确实没有出现。然而，至少在Chrome和Safari中仍然存在。 - Ash Thomas
我已经修复了开头部分：http://jsfiddle.net/742tvhqy/3/ 不知道如何修复结尾。 - dfsq
2个回答
1

我已经解决了你的问题。我猜测这是浏览器的一个bug，因为它在动画后没有重新渲染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)也不行 :) 但是嘿，5毫秒和1毫秒一样。我现在想不到更好的解决方案了。它有效。
顺便说一句，在你的位置上，我会用几行jQuery代码来完成所有这些事情，而不是使用那些花哨的CSS动画。
0
也许这样做……为按钮添加另一个类，并在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

你有两个选择 :)

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);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接