目标:想要实现的效果,鼠标移动过来,让当前img的z-index最大,现在用一个来测试。
出现问题:设置好函数,移动上去没反应,对比代码并无错误之处。
尝试办法:
1、使用click和onmouseover,一起来测试
2、使用onmouseover,此时console.log都打印不出来,z-index无法生效
3、使用onclick,可以打印出console.log,但z-index无效
代码如下:
1,用来测试的两个img
<img id="fangyibo" src="./images/fangyibo.png" style=" " onclick="fang()">
<img id="liyanqiu" src="./images/liyanqiu.png ">
2,它俩的css
.teachers #fangyibo {
position: relative;
display: block;
z-index: 1;
float: left;
}
.teachers #liyanqiu {
position: relative;
display: block;
z-index: 4;
float: left;
margin-left: -68px;
}
3,设置的函数
window.onload = function() {
var fangYi = document.getElementById("fangyibo");
fangYi.onmouseover = function() {
console.log (11);
document.getElementById("fangyibo").style.zIndex = 10;
}
}
function fang() {
console.log ("11");
document.getElementById("fangyibo").style.zIndex = 100;
}
首先你css写的就有问题,用了定位就没必要在用display和float,用了定位就已经转成块级元素了。
js的fang函数应该放在window.onload函数体内,不然的话dangyibo这个id是找不到的。