zoukankan      html  css  js  c++  java
  • 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,鼠标原样式为光标
     
  • 相关阅读:
    Go实现线程池
    Go语言工程结构
    Go语言示例-函数返回多个值
    Go语言参数中的三个点是干什么的
    go语言示例-Timer计时器的用法
    Go语言的类型转化
    iOS 修改通讯录联系人地址(address)崩溃原因分析
    tableview小结-初学者的问题
    Objective-C总Runtime的那点事儿(一)消息机制
    论坛源码推荐(11.6):iPhone6/6 plus屏幕适配Demo,Java代码转Objective-C
  • 原文地址:https://www.cnblogs.com/blogslee/p/7483852.html
Copyright © 2011-2022 走看看