您的位置：首页 > 移动开发

移动端，点击之后某个区域后有阴影

2016-03-01 10:38 393 查看

移动端，点击之后某个区域后有阴影

今天偶然发现一件很奇怪的事儿。

在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，

在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，

后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：

如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<style type="text/css">

div {
/*关键代码*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.btn-blue {
display: block;
height: 42px;
line-height: 42px;
text-align: center;
border-radius: 4px;
font-size: 18px;
color: #FFFFFF;
background-color: blue;
}

.btn-blue-on {
background-color: red;
}
</style>
</head>

<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function() {
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function() {
this.className = "btn-blue"
}

btnBlue.onclick = function(){
alert(123)
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航