내 음소거 버튼을 누를 때 텍스트가 강조 표시됩니다.

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 코드를 풀어, 그래서 내 스크립트에서) 다른 (더 지저분 해 보이는) 난에서 추가/제거 할 수 있나요 내 버튼 코드가 ​​버튼처럼 작동하도록하려면 어떻게해야합니까? (필요한 경우 자세히 설명하겠습니다)

미리 감사드립니다.

다니엘

당신은 CSS와 요소에 사용자 선택 비활성화 할 수

Answer 1

:

이

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

브라우저 Compability가 : http://caniuse.com/#search=user-select

편집이 : 당신은 또한 실제 버튼 요소와 스타일을 사용할 수 있습니다 그것을 당신이 원하는대로.