select option的问题,类似于title的效果 前面都是效果,最后放了3个<select>,如果只有一个<select>,效果是对的,但是放了3个的话,那个提示的div就会被并排的那两个<select>遮盖住 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 是这样, <select>显示层比 div 要高所以出现这个情况.显示优先级, <iframe> <object> <applate> <select> 其它 Abs定位, Z-Index控制可以通过取坐标, 先隐藏 select 控件, 这个以前作过, 现在没代码你可以找找, 作菜单的代码, 很多得处理到这个情况了.... 在你的基础上改了下,两个页面2.htm<body style="background-color:red">1.htm<style type="text/css">#hintbox{ /*CSS for pop up hint box */position:absolute;top: 0;background-color: lightyellow;width: 150px; /*Default width of hint.*/ padding: 3px;border:1px solid black;font:normal 11px Verdana;line-height:18px;z-index:100;border-right: 3px solid black;border-bottom: 3px solid black;visibility: hidden;}.hintanchor{ /*CSS for link that shows hint onmouseover*/font-weight: bold;color: navy;margin: 3px 8px;}</style><script type="text/javascript">var horizontal_offset="9px" //horizontal offset of hint box from anchor link/////No further editting neededvar vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.var ie=document.allvar ns6=document.getElementById&&!document.allfunction getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;}function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function clearbrowseredge(obj, whichedge){var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1if (whichedge=="rightedge"){var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40dropmenuobj.contentmeasure=dropmenuobj.offsetWidthif (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)}else{var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18dropmenuobj.contentmeasure=dropmenuobj.offsetHeightif (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight}return edgeoffset}function showhint(menucontents, obj, e, tipwidth){if ((ie||ns6) && document.getElementById("hintbox")){dropmenuobj=document.getElementById("hintbox")iframe1.document.body.innerHTML=document.all.sel1.options[document.all.sel1.selectedIndex].text//iframe1.document.body.innerHTML=menucontents//dropmenuobj.innerHTML=menucontentsdropmenuobj.style.left=dropmenuobj.style.top=-500if (tipwidth!=""){dropmenuobj.widthobj=dropmenuobj.styledropmenuobj.widthobj.width=tipwidth}dropmenuobj.x=getposOffset(obj, "left")dropmenuobj.y=getposOffset(obj, "top")dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"dropmenuobj.style.visibility="visible"obj.onmouseout=hidetip}}function hidetip(e){dropmenuobj.style.visibility="hidden"dropmenuobj.style.left="-500px"}/*function createhintbox(){var divblock=document.createElement("div")divblock.setAttribute("id", "hintbox")document.body.appendChild(divblock)}if (window.addEventListener)window.addEventListener("load", createhintbox, false)else if (window.attachEvent)window.attachEvent("onload", createhintbox)else if (document.getElementById)window.onload=createhintbox*/</script><form ID=Form1><b>Username:</b> <input type="text" class="test" ID=Text1/><a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br /><b>Password:</b> <input type="text" class="test" ID=Text2/> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br /><select id="sel1" onMouseover="showhint('dddd', this, event, '200px')"><option>sssssssss</option><option>bbbbbbb</option></select><select id="sel2" onMouseover="showhint('dddd', this, event, '200px')"><option>sssssssss</option><option>bbbbbbb</option></select><select id="sel3" onMouseover="showhint('dddd', this, event, '200px')"><option>sssssssss</option><option>bbbbbbb</option></select></form><div id="hintbox" ><iframe name="iframe1" src="2.htm" style="width:100%;height:100%;background-color:red" frameborder="0"></iframe></div> dropmenuobj.innerHTML=document.all.sel1.options[document.all.sel1.selectedIndex].text--->>>dropmenuobj.innerHTML=document.all.sel1.options[document.all.sel1.selectedIndex].text +'<div style="position:absolute;z-index:-1;width:100%;height:25px;top:0;left:0;scrolling:no;background-color:yellow;"></div><iframe style="position:absolute;z-index:-2;width:100%;height:25px;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>' 另外,对于宽度超长的option,可以将其width设为auto,以宽整显示text. 设置select的高度的问题 JS图片特效 如何更改实现双击图片后在原网页打开链接 js连接数据库SqlServer2005 js函数如何获得对自身的引用? 一个脚本问题 小白求助, 如何点击tr后改变单选框状态,并改变本行的文字颜色 我用window.open()打开一个没有菜单栏的窗口,如果屏蔽别人用ctr+N打开新窗口 如何修改父窗口的标题 请用易懂的语言举例介绍onreadystatechange Event,结合document Object 两个JS的初级问题,高手请看看。马上揭帖 javascript控制键盘输入问题! Java script 中插入FLASH的问题?
显示优先级, <iframe> <object> <applate> <select> 其它 Abs定位, Z-Index控制
可以通过取坐标, 先隐藏 select 控件, 这个以前作过, 现在没代码
你可以找找, 作菜单的代码, 很多得处理到这个情况了....
2.htm
<body style="background-color:red">
1.htm
<style type="text/css">#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}</style><script type="text/javascript">var horizontal_offset="9px" //horizontal offset of hint box from anchor link/////No further editting neededvar vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.allfunction getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
iframe1.document.body.innerHTML=document.all.sel1.options[document.all.sel1.selectedIndex].text
//iframe1.document.body.innerHTML=menucontents
//dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}
/*
function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox
*/
</script>
<form ID=Form1>
<b>Username:</b> <input type="text" class="test" ID=Text1/><a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />
<b>Password:</b> <input type="text" class="test" ID=Text2/> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
<select id="sel1" onMouseover="showhint('dddd', this, event, '200px')">
<option>sssssssss</option>
<option>bbbbbbb</option>
</select>
<select id="sel2" onMouseover="showhint('dddd', this, event, '200px')">
<option>sssssssss</option>
<option>bbbbbbb</option>
</select>
<select id="sel3" onMouseover="showhint('dddd', this, event, '200px')">
<option>sssssssss</option>
<option>bbbbbbb</option>
</select>
</form>
<div id="hintbox" ><iframe name="iframe1" src="2.htm" style="width:100%;height:100%;background-color:red" frameborder="0"></iframe></div>
--->>>
dropmenuobj.innerHTML=document.all.sel1.options[document.all.sel1.selectedIndex].text +'<div style="position:absolute;z-index:-1;width:100%;height:25px;top:0;left:0;scrolling:no;background-color:yellow;"></div><iframe style="position:absolute;z-index:-2;width:100%;height:25px;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>'