当我按下我的静音按钮时，文本被突出显示

Question

我有一个静音按钮，可在两个图像（一个静音，一个静音）之间切换，而按钮本身按照它的设定进行。但无论出于何种原因，当我多次按下按钮或太快时，最近的选择符（它是文本或图像）会突出显示，就好像该按钮是透明图层，而实际上只是按下背景我的网页。为什么我的静音按钮可以做到这一点？我已经多次阅读我的脚本，但无法解决问题。有什么我可以包裹我的静音按钮，使其行为更像一个按钮？

这是按钮

<style> 
.unmute{  
background-image: url(unmute.png); 
position: absolute; 
background-size: cover; 
margin-left: 25px; 
width:153; 
height:96; 
cursor: pointer; 
} 

.mute{ 
background-image: url(mute.png); 
} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</script> 

<audio id="track" autoplay="autoplay" loop="loop"> 
    <source src="poopsyflop.wav"/> 
</audio> 

<div class='unmute' onclick="document.getElementById('track').muted = 
!document.getElementById('track').muted;$(this).toggleClass('mute')"></div> 
<a href="#noscroll" id="mute"></a> 

代码（我拆开脚本jQuery代码，所以看起来不同（比较杂乱）在我的脚本） 有什么我可以添加/删除从我的按钮代码，使它更像一个按钮？ （如有需要，我会进一步细化）

在此先感谢大家！

-Daniel

Answer 1

可以取消激活与CSS元素用户选择：

.unmute, 
.mute 
{ 
    -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
} 

浏览器保持兼容：​​3210

编辑：您也可以使用一个真正的按钮元素和风格它如你所愿。