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

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

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