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

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>

（我已经解开了 Script jquery 代码，所以它在我的脚本中看起来不同（更混乱）） 我可以从我的按钮代码中添加/删除任何东西以使其更像按钮吗？ （如有需要我会进一步详述）

提前感谢大家！

-丹尼尔

Answer 1

您可以使用 CSS 取消用户对元素的选择：

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

浏览器兼容性：http://caniuse.com/#search=user-select

编辑：您还可以使用真正的按钮元素并根据需要设置样式。