有关html特效的
RT
有三个层,A,B,C,彼此重叠,但是鼠标移到A,A就到最上面,覆盖下面的,移到B,比就在上面,覆盖下面的,在移到A,又到上面,就这样。求大神
------解决方案--------------------
以DIV为例
css:
.hover,
div:hover {position: relative; z-index: 999} 【兼容到IE7+ ,IE6无效】
javascript:
var divs = document.getElementsByTagName('div'),
len = divs.length,
i = 0;
for (i; i < len; i++) {
divs[i].onmouseover = function () {
this.className = this.className + ' ' + 'hover';
}
divs[i].onmouseout = function () {
this.className = this.className.replace(/hover/g, '');
}
}
未经过测试,下面JS的方法还是需要上面的.hover样式支持
------解决方案--------------------
先设置一个计数器,然后在ABC的mouseover时间中让计数器+1;
JScript code
var a=$('a'),
b=$('b'),
c=$('c'),
zIndex=100;
function apear(){
this.style.zIndex=zIndex;
zIndex++;
}
a.onmouseover=function(){
apear.call(this);
};
b.onmouseover=function(){
apear.call(this);
};
c.onmouseover=function(){
apear.call(this);
}