V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
love
V2EX  ›  前端开发

在手机浏览器上,点击过后元素上的 :hover 效果一直都会在,怎么才能去掉呢?

  •  
  •   love · 2019-05-14 10:14:18 +08:00 · 383 次点击
    这是一个创建于 1780 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如做个工具栏按钮,点了之后按钮会一直灰色,除非再点一下页面空白地方,太丑了!

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <style>
    .btn { padding: 1em; font-size: xx-large; }
    .btn {
      background: #fff;
      border: 1px solid #777;
    }
    .btn:hover {
      background: #ddd;
    }
    .btn:focus {
      outline: green solid 5px;
    }
    .btn:active {
      color: red;
    }
    </style>
    
    <div id="root">
      <button class="btn" id=btn1>Click Me</button>
      <button class="btn">Click Me 2</button>
    </div>
    
    <script>
    btn1.onclick = function (e) {
      e.target.blur()
    }
    </script>
    
    oul
        1
    oul  
       2019-05-14 10:27:00 +08:00
    :hover 是给鼠标用的,如果想要实现类似效果,可以使用 touch 事件来模拟。
    love
        2
    love  
    OP
       2019-05-14 11:01:05 +08:00
    @oul 我指的是在电脑浏览器上有:hover,在手机上去掉。因为手机上点击后:hover 样式一直都会存在,不象电脑上鼠标走了就没了。


    我已经在 SO 上发现方法了(也是用的很绕的方法),应该是浏览器的限制,不可能会有完美的办法。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2947 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:14 · PVG 23:14 · LAX 08:14 · JFK 11:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.