zoukankan      html  css  js  c++  java
  • 【jquery】hover方法

      方法名称:hover(over, out)

      概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

      参数:

        1) overFunction

          鼠标移到元素上要触发的函数

        2) outFunction

          鼠标移出元素要触发的函数

      例子:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>鼠标滑过效果</title>
     6 <script src="http://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script> 
     7 <script type="text/javascript">
     8 $(document).ready(function() {
     9     //$("#orderedlist tbody tr").css("text-align","center");
    10     $("#orderedlist tbody tr").css({"text-align":"center"});
    11     $("#orderedlist tbody tr").hover(function() {
    12         $(this).addClass("blue");
    13     }, function() {
    14         $(this).removeClass("blue");
    15     });
    16 });
    17 </script>
    18 <style>
    19 .blue {
    20     background:#bcd4ec; 
    21     cursor:pointer;        
    22 }
    23 </style>
    24 </head>
    25 <body>
    26 <table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0"> 
    27 <thead>
    28   <tr>
    29     <th>姓名</th>
    30     <th>年龄</th>
    31     <th>QQ</th>
    32     <th>Email</th>
    33   </tr>
    34 </thead>
    35 <tbody>
    36   <tr>
    37     <td>AAAA</td>
    38     <td>20</td>
    39     <td>1111</td>
    40     <td>aaaa@gmail.com</td>
    41   </tr>
    42   <tr>
    43     <td>BBBB</td>
    44     <td>21</td>
    45     <td>2222</td>
    46     <td>bbbb@gmail.com</td>
    47   </tr>
    48   <tr>
    49     <td>CCCC</td>
    50     <td>22</td>
    51     <td>333</td>
    52     <td>cccc@gmail.com</td>
    53   </tr>
    54 </tbody>
    55 </table>
    56 </body>
    57 </html>
    58 </html>

    效果图:

  • 相关阅读:
    osgi:设置httpservice端口号
    osgi: HttpService A null service reference is not allowed.
    Java Web中涉及的编解码
    http协议之cookie标准RFC6265介绍
    信息传输完整性、保密性、不可抵赖性实现
    web开发基础--字节序
    结构体
    ArrayList和LinkedList的some东东
    循环---匹配
    关于游戏的留存率想到的
  • 原文地址:https://www.cnblogs.com/ningvsban/p/3720718.html
Copyright © 2011-2022 走看看