可点击行为的奇怪行为> 触摸时？ 首先，感谢您阅读和帮助我。我花了最后4个小时在网络上寻找我的奇怪问题的解决方案。 问题 我用<div>操作创建了一个(click)。使用CSS类:hover，:active和:focus设置样式。当我用鼠标单击它时，一切都很好。但是当我用触摸屏触摸它时，会出现一个奇怪的灰色覆盖（请参阅链接的GIF ）!! Behaviour when mouse-clicked Behaviour when touched 这里是我的代码段： #btn-container { margin: 5px; text-decoration: none; cursor: pointer; float: left; border-radius: 25px; border: none; transition: 0.3s; background-color: rgb(230,230,230); color: black; } #btn-container:hover { background-color: rgb( 200,200,200 ); } #btn-container:active { background-color: rgb( 150,150,150 ); transition: 0s; } #btn-container:focus { outline: 0; } .standard-btn { padding: 12px 20px; display: inline-block; } html { /* Prevent user to select text */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer, Edge */ user-select: none; /* Non prefixed version: Chrome, Opera */ } <div id="btn-container" class="standard-btn">Touch me</div> PS：我正在Angular中进行开发。我已经在Android版Chrome，iOS上的Safari，Windows上的Chrome，Edge，IE上测试了这种奇怪的行为。奇怪的是，例如，在JSFiddle（here）上或在StackOverflow上，这不会发生。而且在我的另一个Angular应用程序上也没有发生....而且我无法找出原因，两个应用程序之间的CSS / HTML / JS 完全 相同。太疯狂了。 首先，感谢您阅读和帮助我。我花了最后4个小时在网络上寻找我的奇怪问题的解决方案。问题我创建一个[>] （单击）操作。 ... ] >> 好，解决了。我将在此处发布解决方案，以备将来参考。 我只需要在主按钮类上添加属性-webkit-tap-highlight-color: transparent。正如所描述的here，这不是标准属性。但这有效！ 参考问题中的代码段，我已经用这种方式修改了#btn-container类： #btn-container { margin: 5px; text-decoration: none; cursor: pointer; float: left; border-radius: 25px; border: none; transition: 0.3s; background-color: rgb(230,230,230); color: black; -webkit-tap-highlight-color: transparent; /* <-- this is new */ }

Question

首先，感谢您阅读和帮助我。我花了最后4个小时在网络上寻找我的奇怪问题的解决方案。

Answer 1

好，解决了。我将在此处发布解决方案，以备将来参考。