JS控制鼠标经过颜色

本帖最后由 bellz 于 2010-07-15 15:52:52 编辑

解决方案 »

  1.   

     <li onmouseover="this.style.backgroundColor='#F5F5F5';" onmouseout="this.style.backgroundColor=''">th1</li>
      

  2.   

    用css的伪类实现是最好的选择
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    </head>
    <body onload="fun()">
        <div>
            <ul>
                <li>th1</li>
                <li>th2</li>
                <li>th3</li>
                <li>th4</li>
                <li>th5</li>
                <li>th6</li>
                <li>th7</li>
                <li>th8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
        </div>
    </body><script type="text/javascript">
        var fun = function() {
            var li = document.getElementsByTagName("li");
            for (var i = 0; i < li.length; i++) {
                li[i].onmouseover = function() {
                   this.style.backgroundColor='#F5F5F5';
                }
                li[i].onmouseout = function() {
                   this.style.backgroundColor='#FFFFFF';
                }
            }
        }
        
    </script></html>
      

  4.   

    使用jquery快點。
    1、先給你的DIV一個ID，如<div id="div1">
    2、JQUERY代碼：
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>//先引用jquery包
    <script type="text/javascript">
    $(function(){
    $("#div1 ul").mouseover(function() {
                $(this).css("background-color","Red")
            }).mouseout(function() {
                $(this).css("background-color","#FFFFFF")
            })
    });
    </script>
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    li:hover  {
    background-color: red;
    color: blue;
    }
    a:hover {
    background-color: blue;
    }
    </style>
    </head>
    <body>
    <a href="#">test</a>
        <div>
            <ul>
                <li>th1</li>
                <li>th2</li>
                <li>th3</li>
                <li>th4</li>
                <li>th5</li>
                <li>th6</li>
                <li>th7</li>
                <li>th8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
            <ul>
                <li>td1</li>
                <li>td2</li>
                <li>td3</li>
                <li>td4</li>
                <li>td5</li>
                <li>td6</li>
                <li>td7</li>
                <li>td8</li>
            </ul>
        </div>
    </body>
    </html>
    在css1中可以在ff中是实现，在css2中都可以
      

  6.   

    没有好的方法？我要的是UL，整行换色，不是单独的LI
      

  7.   

    li 是整行，ul是一个列表。ul颜色改变更好实现。
      

  8.   

    希望楼上能给个方法<ul>
                <li>th1</li>
                <li>th2</li>
                <li>th3</li>
                <li>th4</li>
                <li>th5</li>
                <li>th6</li>
                <li>th7</li>
                <li>th8</li>
            </ul>th1 th2 th3 th4 th5 th6 th7 th8我是横行排的
      

  9.   


    <!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>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #list { list-style:none; height: 30px; width: 320px; line-height:30px; border: 1px solid red; background-color: green; }
    #list li { float: left; width: 40px;}
    </style>
    </head>
    <body>
    <ul id="list">
      <li>th1</li>
      <li>th2</li>
      <li>th3</li>
      <li>th4</li>
      <li>th5</li>
      <li>th6</li>
      <li>th7</li>
      <li>th8</li>
      </ul>
    <script>
    void function() {
    var lis = document.getElementById('list');
    lis.onmouseover = function() {
    this.style.backgroundColor = 'red';
    };
    lis.onmouseout = function() {
    this.style.backgroundColor = 'green';
    };
    }();
    </script>
    </body>
    </html>