61,128
社区成员




<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box { position:relative; width:500px; margin:30px auto; }
.box * { position:absolute; top:0; right:0; width:100px; height:35px; }
.box .box-button { background-color:red; color:#FFF; line-height:30px; text-align:center; font-size:14px; }
.box .box-cover { z-index:100; cursor:pointer; }
</style>
<script type="text/javascript">
function docLoad() {
document.getElementById("cover").attachEvent("onclick", function () {
alert("OK");
});
}
</script>
</head>
<body onload="docLoad()">
<div class="box">
<div class="box-button">选择</div>
<div class="box-cover" id="cover"></div>
</div>
</body>
</html>
<style type="text/css">
#cover {
background-color: green;
filter:alpha(opacity=0);
}
</style>
给 “cover” 一个背景色,让他完全遮住按钮;然后使其完全透明,把按钮的样式露出来。
这样就能解决你的问题。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box { position:relative; width:500px; margin:30px auto; }
.box * { position:absolute; top:0; right:0; width:100px; height:35px; }
.box .box-button { background-color:red; color:#FFF; line-height:30px; text-align:center; font-size:14px; }
.box .box-cover { z-index:100; cursor:pointer; }
</style>
<script type="text/javascript">
function aa(){
alert("OK");
}
</script>
</head>
<body onload="docLoad()">
<div class="box">
<div class="box-button">选择</div>
<div class="box-cover" id="cover" onclick="aa()"></div>
</div>
</body>
</html>
.box .box-cover { z-index:100; cursor:pointer;background:yellow;filter:alpha(opacity=0.1);
-moz-opacity:0.1;
-khtml-opacity: 0.1;
opacity: 0.1;}