多行select鼠標移動怎麼做到和單行select一樣的反白效果？

select下拉菜單鼠標在上面移動時，裡面的選項會跟著鼠標反白顯示。
但是設置了size屬性的多行顯示select就沒有這個效果，必須要按下鼠標不放才有這個反白效果，
如何做到能和第一種(下拉式select)那樣只移動鼠標就有反白效果呢？

解决方案 »

  1.   

    首先不太懂你的意思，你所谓的反白效果是什么效果？按照我的理解，是鼠标滚动时，选项能够滚动？
    想下面的代码？如果是这个效果，也是有提前的需要获得焦点。总之猜不透你的需求
      <select id="a">
    <option>测试1</option>
    <option>测试2</option>
    <option>测试3</option>
    <option>测试4</option>
    <option>测试5</option>
    <option>测试6</option>
      </select>
      <select id="a" size="3">
    <option>测试1</option>
    <option>测试2</option>
    <option>测试3</option>
    <option>测试4</option>
    <option>测试5</option>
    <option>测试6</option>
      </select>
      

  2.   

    那个是 js 效果   不是select了吧 
      

  3.   

    我試過，這個鼠標不響應option選項，象下面那樣，都沒反應：
     <select id="a" size="3">
        <option>测试1</option>
        <option onmouseover="this.style.background='#000099';this.style.color='#ffffff;">测试2</option>
        <option>测试3</option>
        <option>测试4</option>
        <option>测试5</option>
        <option>测试6</option>
      </select>
      

  4.   


    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    init();
    init1();
    });

    function init(){
    var ops = $(".CCC");
    $.each(ops, function(key, value){
    $(value).mousemove(overover);
    });
    }

    function overover(){
    //this
    var elem = $(this);
    $(elem).css("background-color", "yellow");
    }

    function init1(){
    var s = $("#Test");
    $(s).mouseover(overover1);
    }

    function overover1(event){
    //var elem = $(event.relatedTarget);
    var elem = $(event.target);
    //alert($(elem).html());
    }

    </script> </head>
    <body>
    <select id="Test" size="3">
    <option class="CCC">23423423</option>
    <option class="CCC">23423423</option>
    <option class="CCC">23423423</option>
    <option class="CCC">23423423</option>
    <option class="CCC">23423423</option>
    </select>
    <select>
    <option>23423423</option>
    <option>23423423</option>
    <option>23423423</option>
    <option>23423423</option>
    <option>23423423</option>
    </select>
    </body>
    </html>
    这是浏览器差异了, 在firefox下是有效果的. 而IE7(其余IE未试)无效. 进一步判断了以后, 发现IE7在鼠标滑过option时并为触发上面的事件监听(后来想通过relatedTarget也无法获取) - 即, 无法捕捉到鼠标划过的那个option.所以事件添加在IE7下是不会执行的如果非要做这种效果. 要我做的话, 我只能根据鼠标位置判断划过的那个option的index, 然后改变样式. 但是这样比较麻烦, 并不实用
      

  5.   

    我用的是IE7，上面的寫法還是沒有效果，init1能改變整個select，但init沒有反應
      

  6.   

    是啊, 我说的就是这个问题, 它之所以会改变整个select, 是因为它只能捕捉到mouseover<select>标签, 不能捕捉到鼠标over<option>这是浏览器机制问题, 没办法控制的. 所以我说根据鼠标位置(pageX,pageY)判断划过哪个option的index, 直接跟做几何题一样来改变样式