|
四、补救之道
就目前的浏览器而言，一种比较有效的补救办法是：当无窗口元素需要覆盖有窗口元素时，运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子：
＜html＞＜head＞
＜style type="text/css"＞
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px solid black;
z-index:100;visibility:hidden;}
#lb_1{position:absolute;left:10px;top:40px; }
＜/style＞
＜script type="text/javascript"＞
var isActive = false;
function showMenu(){
isActive = true;
//document.getElementById("lb_1").style.visibility="hidden";
document.getElementById("subMenus").style.visibility="visible";
}
function hideMenu(){
isActive = false;
setTimeout('hide()',100);
}
function hide(){
if(!isActive){
document.getElementById("subMenus").style.visibility = "hidden";
document.getElementById("lb_1").style.visibility="visible";
}
}
function setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = "Gray";
menuItem.style.color = "#FFFFFF"
}
function setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = "";
menuItem.style.color = ""
hideMenu();
}
＜/script＞＜/head＞＜body＞
＜div id="main" style="position:absolute;width:200px;"＞
＜div id="menuBlock" class="menuBlock" onmouseover="showMenu();"
onmouseout="hideMenu();"＞CSS菜单＜/div＞
＜div id="subMenus" ＞
＜div id="0" onmouseover="setStyle(this)"
onmouseout="setDefault(this)" ＞菜单项目一＜/div＞
＜!--共四个菜单项目 --＞
＜/div＞＜P＞
＜select id="lb_1" name="lb_1"＞
＜option value="-1"/＞选择列表
＜!-- 三个选项 --＞
＜/select＞
＜/div＞
＜/body＞＜/html＞
页面的＜STYLE＞部分定义了三个样式，分别用于菜单条、菜单项目、选择列表，通过样式定义保证菜单、选择列表的显示区域重叠。＜BODY＞部分包含菜单和＜SELECT＞选择列表的定义。当鼠标经过菜单条时，JavaScript函数showMenu执行，显示出菜单，同时隐藏SELECT选择列表。鼠标离开后，hideMnu函数隐藏菜单，同时恢复选择列表。其余几个JavaScript函数主要用于模拟菜单动作，鼠标经过菜单项时以高亮度显示菜单（setStyle函数），鼠标离开菜单项目时则将它恢复默认显示形式（setDefault函数）。页面的运行效果如图二所示。将showMenu函数中的document.getElementById("lb_1").style.visibility="hidden"语句注释掉就可以看到图一的效果。
＜descript＞
＜img src=/cce/img/553/04601t02.jpg＞
＜/descript＞
总之，表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效，不过如果你实在不想用这种办法，那就只好考虑改变页面布局，避免表单元素和样式元素的显示区域重叠。
上一页
|
