第36行的onclick方法为什么不起作用

xunfengqi 2018-07-06 04:00:35

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#back{
width: 500px;
height: 300px;
border: black solid 3px;
background-image: url("1.jpg");
position: absolute;
}
.font{
width: 100px;
height:100px;
background: aquamarine;
float: left;
}
</style>
<script>
window.onload=function () {
var str='';
var oDiv=document.getElementById("back");
for(i=0;i<15;i++){
str +='<div class=\'font\'></div>';
}
oDiv.innerHTML=str;
var aDiv=document.getElementsByClassName("font");
for(j=0;j<15;j++){
aDiv[j].onmouseover=function () {
this.style.visibility='hidden';
}
}
for(j=0;j<15;j++){
aDiv[j].onclick=function () {
this.style.visibility='visible';
}
}
}
</script>
</head>
<body>
<div id="back"></div>
</body>
</html>

...全文

157 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

xunfengqi 2018-07-09

打赏
举报

多谢各位....

刘已墨 2018-07-06

打赏
举报

window.onload=function () {

            var str='';

            var oDiv=document.getElementById("back");

            for(i=0;i<15;i++){

                str +='<div class=\'font\'></div>';

            }

            oDiv.innerHTML=str;

            var aDiv=document.getElementsByClassName("font");

            for(j=0;j<15;j++){

                aDiv[j].onmouseover=function () {

                    this.style.visibility='visible'; //他无效了

                }

            }

            for(j=0;j<15;j++){

                aDiv[j].onclick=function () {

                    this.style.visibility='hidden';  //这样他就有效了 因为隐藏了感知不到了

                }

            }

        }

DaveLeeCN 2018-07-06

打赏
举报

鼠标悬浮的时候都隐藏掉了，自然也就点不到了

asdqsca 2018-07-06

打赏
举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#back{
width: 500px;
height: 300px;
border: black solid 3px;
background-image: url("1.jpg");
position: absolute;
}
.font{
width: 100px;
height:100px;
background: aquamarine;
float: left;
}
</style>
<script>
window.onload=function () {
var str='';
var oDiv=document.getElementById("back");
for(i=0;i<15;i++){
str +='<div class=\'font\'></div>';
}
oDiv.innerHTML=str;
var aDiv=document.getElementsByClassName("font");
for(j=0;j<15;j++){
aDiv[j].onmouseover=function () {
this.style.opacity= 0;
}
}
for(j=0;j<15;j++){
aDiv[j].onclick=function () {
this.style.opacity=1;
}
}
}
</script>
</head>
<body>
<div id="back"></div>
</body>
</html>
你可以把visibility 换成 opacity visibility 被置为hidden的时候虽然当前元素仍然会在dom中占位置但是当前元素是不可选择的所以不能触发你绑定的事件