前面都是效果,最后放了3个<select>,如果只有一个<select>,效果是对的,但是放了3个的话,那个提示的div就会被并排的那两个<select>遮盖住

解决方案 »

  1.   

    是这样, <select>显示层比 div 要高所以出现这个情况.
    显示优先级, <iframe> <object> <applate> <select> 其它 Abs定位, Z-Index控制
    可以通过取坐标, 先隐藏 select 控件, 这个以前作过, 现在没代码
    你可以找找, 作菜单的代码, 很多得处理到这个情况了....
      

  2.   

    在你的基础上改了下,两个页面
    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>
      

  3.   

    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>'
      

  4.   

    另外,对于宽度超长的option,可以将其width设为auto,以宽整显示text.