黑马程序员技术交流社区

标题: js中select下的option设置mouseover出现问题 [打印本页]
作者: 黑马杨凯    时间: 2012-6-28 19:32
标题: js中select下的option设置mouseover出现问题
本帖最后由 黑马杨凯 于 2012-6-28 19:49 编辑

代码如下，做练习时遇到一个问题，给select的option动态添加mouseover事件，结果不响应，请大家指教,先行谢过~怀疑它是不是没有mouseover事件，求真相，不解~
<head>
    <title>选队伍</title>
    <style type="text/css">
        .button1
        {
            width:100%;
            float:left;
        }
    </style>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#select1 option").mouseover(function () {
                $(this).css("backgroundColor", "red");
            });

        });
    </script>
</head>
<body>

   <select id="select1"  style="float:left;width:100px" multiple="multiple" size="10">
        <option>北京队</option>
        <option>上海队</option>
        <option>山东队</option>
        <option>辽宁队</option>
        <option>吉林队</option>
        <option>河北队</option>
        <option>内蒙古队</option>
   </select>
  </body>
</html>

作者: 许庭洲    时间: 2012-6-29 08:16
1，在select的option标签中加上一个title属性，这个属性叫title属性，即title="值"；
2，   <select id="select1"  style="float:left;width:100px" multiple="multiple" size="10">
        <option title="1">北京队</option>
        <option title="2">上海队</option>
        <option title="3">山东队</option>
        <option title="4">辽宁队</option>
        <option title="5">吉林队</option>
        <option title="6">河北队</option>
        <option title="7">内蒙古队</option>
   </select>
作者: 黑马杨凯    时间: 2012-6-29 09:31
为什么加了mouseover事件没有响应呢，想达到鼠标悬停在option上面就高亮显示的效果，但是试了很多办法都不行啊~
作者: 许庭洲    时间: 2012-6-29 09:34
黑马杨凯 发表于 2012-6-29 09:31
为什么加了mouseover事件没有响应呢，想达到鼠标悬停在option上面就高亮显示的效果，但是试了很多办法都不 ...

在option标签中加上一个title属性试试看！
作者: 黑马杨凯    时间: 2012-6-29 09:43
许庭洲 发表于 2012-6-29 09:34
在option标签中加上一个title属性试试看！

试了啊 只有title中的值得显示 option的背景色没有发生变化
作者: 黑马杨凯    时间: 2012-6-29 10:23
本帖最后由 黑马杨凯 于 2012-6-29 10:32 编辑

通过百度等得到一些参考资料，基本上都建议用div来模拟select来做，已验证在IE浏览器上option不支持mouseover,在其他非IE内核的浏览器上正常显示，刚开始学习jquery，太相信它的跨浏览器特性了，没在其他浏览器上测试过~失误失误~我现在的水平还无法用div来模拟select,如果有相关解决方案，希望能指教~拜谢~



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2