• CSS+元素,鼠标事件触发鼠标模形变成手状的形状


    || 版权声明:本文为博主原创笔记,未经博主允许不得转载。

    CSS+元素,鼠标事件触发鼠标模形变成手状的形状,以及其他样式。

    方案一:使用CSS样式改变,鼠标移动到元素上显示手状。

    1 cursor:pointer;


    方案二:使用JS触发事件改变原样式:鼠标事件onmouseover(鼠标移动到元素上触发事件)触发时设置样式

    1 // 使用在元素的标签上的事件
    2 // 第一种方式
    3 onmouseover="this.style.cursor='mouseHand'"
    4 
    5 // 第二种方式
    6 onmouseover="this.ClassName=‘mouseHand’“

     cursor属性的常用取值,如下: 
    2
    default :标准箭头光标 3 pointer, hand :手形光标 4 auto :标准光标 5 all-scroll :三角方向光标 6 move :移动光标 7 crosshair :十字光标 8 wait :0等待光标 9 text :I字母形光标 10 vertical-text :水平I形光标 11 no-drop :不可拖动光标 12 not-allowed :无效光标 13 help :帮助光标 14

    demo案例演示

     1 <html>
     2     <head>
     3         <meta charset="UTF-8">
     4         <title></title>
     5     </head>
     6     <style type="text/css">
     7         .CoverTittle {
     8              100%;
     9             height: 2em;
    10             line-height: 2em;
    11             background-color: #208ad3;
    12             color: #fff;
    13             font-size: 2em;
    14             text-align: center;
    15             border: 0.3em 0.3em 0 0;
    16             position: relative;
    17         }
    18         .amove{
    19             cursor: pointer;
    20         }
    21     </style>
    22     <script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    23     <script type="text/javascript">
    24         $(function(){
    25             // 点击cancel事件
    26             resetPassConfirm = function(){
    27                 alert("cancel");
    28             }
    29             // div点击事件
    30             divclick = function(){
    31                 alert('div');
    32                 parseInt();
    33             }
    34             
    35         });
    36     </script>
    37     <body>
    39     <div id="resetPassConfirm" onclick="divclick();" class="CoverTittle tbtn" style=" 100%;" >
    40         <span onclick="resetPassConfirm();" id="attentionConfirm" onmousemove='this.className="amove"'>Cancel</span>
    41     </div>
    42     <br />
    43     <--!  onmousemove鼠标移动到元素上触发事件:该变当前元素的样式,使用this.className="自定义Name",设置样式cursor: pointer;-->
    44     <div id="resetPassConfirm" onclick="divclick();" class="CoverTittle tbtn" style=" 100%;" 
    45         onmousemove='this.className="CoverTittle amove"'>
    46         <span onclick="resetPassConfirm();" id="attentionConfirm">Cancel</span>
    47     </div>
    49         <p>新建段落</p>
    50         <div id="TipConfirmTbtn"  class="CoverTittle tbtn" style=" 100%; display: block;background-color: #208ad3;">Confirm</div>
    51         <div style="position: relative;top: 30px;left: 20px;">
    52             sdfds
    53         </div>
    54     </body>
    55 </html>

    只有当鼠标移动到Cancel文本上时,才出发事件,改变手状光标

    Cancel

    <--! onmousemove鼠标移动到元素上触发事件:该变当前元素的样式,使用this.className="自定义Name",设置样式cursor: pointer;-->

    Cancel:这是指定整个div的光标css样式为手状

    新建段落

    Confirm:这是一个文本的div,鼠标原样式为光标
     
  • 相关阅读:
    [HTTP2] HTTP1 probs and HTTP2 saves
    [HTTPS] MAN IN THE MIDDLE (MITM)
    [HTTP] HTTP Verb
    [Node.js] Creating JWTs (JSON Web Tokens) in Node
    [RxJS] Drag and Drop example
    [Webpack 2] Ensure all source files are included in test coverage reports with Webpack
    [Webpack 2] Add Code Coverage to tests in a Webpack project
    android简单的答题游戏
    Java Web----EL(表达式语言)详解
    使用ant构建报错,编码GBK的不可映射字符解决方法
  • 原文地址:https://www.cnblogs.com/blogslee/p/7483852.html
Copyright © 2020-2023  润新知