JQuery 鼠标经过变色

本帖最后由 conqu12 于 2013-11-10 20:53:02 编辑

解决方案 »

  1.   

    我不太懂哦，就是来逛逛觉得是经过时mouseover事件，函数体里面可以先将该div的背景颜色保存下来，然后给该div加上一个定义好黄色背景的class。mouseout就去掉className再将背景颜色取出来赋值给现在的div。click事件同样就是加上这个class，不过首先先将所有这些div的className赋值'';不知道我表达的明白了吗？
      

  2.   

    现在问题是，我click，div是变成黄色，但mouseout后颜色又变成白色了
      

  3.   


    <!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>
    <style type="text/css">
    #parentid > div:hover {
    background-color: #ffff00;
    }
    .avb {
    background-color: #ffff00;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript">
    var temp = $();
    $(function(){
    $("#parentid").on("click","div",function(event){
    temp.removeClass("avb");
    temp = $(this);
    temp.addClass("avb")
    });
    });
    </script>
    </head>
    <body>
    <div id="parentid">
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    <div>sssssssssssssssssss</div>
    </div>
    </body>
    </html>
      

  4.   

    朋友，试验了下你的代码，鼠标经过变色实现了，但是没实现当我点击某个div后，鼠标离开这个div的时候，这个div不变成原来的颜色。就像我们的QQ好友列表一样，你选中某个好友，好友的背景色变成一种颜色，但当你鼠标移开这个好友的时候，被点击的好友的背景色还是处于选中状态。
      

  5.   

    <!DOCTYPE HTML5>
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META charset="uft-8">
      <script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
      <style type="text/css" rel="stylesheet">
    .hove{background:yellow}
    .click{background:yellow}
      </style>
      <script>
    $(document).ready(function(){
    $("div").hover(function(){
    $(this).addClass("hove")
    },function(){
    $(this).removeClass("hove")
    })
    $("div").click(function(){
    $(this).addClass("click").siblings().removeClass("click")
    })
    })
      </script>
     </HEAD>
     <BODY>
      <div id="one">11111</div>
      <div >2222</div>
      <div >2222</div>
      <div >2222</div>
      <div >2222</div>
      <div >2222</div>
      <div >2222</div>
     </BODY>
    </HTML>
      

  6.   

    不可能，你怎么试验的，jquery加载了没有