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;
}

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

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

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

1 个答案: