鼠标hover事件，求大神指导

鼠标js

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="table-row-1.0.js"></script> 
    <style type="text/css"> 
    .table-tr-title{ 
    height: 26px; 
    font-size: 12px; 
    text-align: center; 
    } 
    .table-tr-content{ 
    height: 18px; 
    background: #FFFFFF; 
    text-align: center; 
    font-size: 12px; 
    } 
    .normalEvenTD{ 
    background: #DFD8D8; 
    } 
    .normalOddTD{ 
    background: #FFFFFF; 
    } 
    .hoverTD{ 
    background-color: #eafcd5; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 
    } 
    .trSelected{ 
    background-color: #51b2f6; 
    height: 18px; 
    text-align: center; 
    font-size: 12px; 
    } 
    </style> 
    </head> 
    <body> 
    <table width="99%" class="list" style="word-break: break-all" border="0" 
    align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98"> 
    <tr class="table-tr-title"> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    <td width="5%">标题</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    <tr class="table-tr-content"> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    <td width="5%">数据</td> 
    </tr> 
    </body> 
    </html> 
      

  2.   

    本帖最后由 showbo 于 2014-06-18 16:00:48 编辑
      

  3.   


            $(document).ready(function() {
                $("li").hover(
                    function() {
                       $('li:nth-child('+$(this).index()+')').css('background-color',"red");
                    }, function() {
                         $('li:nth-child('+$(this).index()+')').css('background-color',"white");
                    }
                );
            });
      

  4.   


    用table不行，如果用table，也是三个 table ，程序不能同把它们读到一个 table中，所以就不好控制
      

  5.   


    已经基本达到要求了，但现在有个问题，我鼠标滑到当前的 LI 中，是上一行的 LI 变色，当前的没有变
      

  6.   


    已经基本达到要求了，但现在有个问题，我鼠标滑到当前的 LI 中，是上一行的 LI 变色，当前的没有变嗯，你说的对，$(this).index() 变成 +$(this).index()+1 就好了，因为nth-child 是从1 开始的