HTML表单元素覆盖样式元素问题及其补救之道(2

  就目前的浏览器而言,一种比较有效的补救办法是:当无窗口元素需要覆盖有窗口元素时,运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子:

  页面的<STYLE>部分定义了三个样式,分别用于菜单条、菜单项目、选择列表,通过样式定义保证菜单、选择列表的显示区域重叠。<BODY>部分包含菜单和<SELECT>选择列表的定义。当鼠标经过菜单条时,JavaScript函数showMenu执行,显示出菜单,同时隐藏SELECT选择列表。鼠标离开后,hideMnu函数隐藏菜单,同时恢复选择列表。其余几个JavaScript函数主要用于模拟菜单动作,鼠标经过菜单项时以高亮度显示菜单(setStyle函数),鼠标离开菜单项目时则将它恢复默认显示形式(setDefault函数)。页面的运行效果如图二所示。将showMenu函数中的document.getElementById(lb_1).style.visibility=hidden语句注释掉就可以看到图一的效果。

  总之,表单元素覆盖样式元素的根源在于HTML元素默认的显示优先级规则。本文介绍的补救办法确实行之有效,不过如果你实在不想用这种办法,那就只好考虑改变页面布局,避免表单元素和样式元素的显示区域重叠。

相关阅读