慎用option中的title属性，及其替代方法

如下图所示的多选框列表，要是鼠标点击某个条例时，显式该条例的详细内容。

 

在页面中加了一个div，当鼠标移动时通过οnmοusemοve="selMouseOver(this)"，来设置并显式div的值。

在IE6中没有问题，鼠标点击后，显式条例的具体内容；

IE7和8，当鼠标移动时，就显式条例的具体内容，点击后，又显式了一遍，重复了。将οnmοusemοve="selMouseOver(this)"去掉后，IE7和8竟然还能显式。

 

原因就在：在option中设置了title属性，<option title='...' value='...'/>

当鼠标放在下拉框中的某一行时，可以显式title中的内容。

 

<option title ='...'/> 的替代方法：

1、定义一个div，设置好样式

<div id="div_hint" style="display:none; position:absolute">
     <iframe id="bb" style="position:absolute; z-index: 99;width:300px; filter:Alpha(opacity=0)" frameborder="0"></iframe>
    <div id="aa" style="width:300px; border: 1px #9c9c9c solid;font-size:12px;color:black;position:absolute;background-color: #F7F7F7;layer-background-color: #0099FF; filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
 </div>

 

2、通过οnmοusemοve="selMouseOver(this)"给他设置值并显式，οnmοuseοut="selMouseOut(this)"关闭显式

  function selMouseOver(obj){
   if(obj.selectedIndex == -1){return;}
    var div_hint = document.getElementById("div_hint");
    div_hint.style.display = "block"
    document.getElementById("aa").innerHTML = obj[obj.selectedIndex].id;------这里显式的是option中的id属性的值
    div_hint.style.left = event.clientX + document.body.scrollLeft+ 10 + 'px';
    div_hint.style.top = event.clientY + document.body.scrollTop + 10 + 'px';
    document.getElementById("bb").style.height = document.getElementById("aa").offsetHeight + "px";
   }
   

function selMouseOut(obj){
    div_hint.style.display = "none"
   }