zoukankan      html  css  js  c++  java
  • 鼠标显示形状图片,cursor:pointer手形状是最常用的显示方式,其实还有其他形式

    鼠标hover可以显示多种样式,甚至可以显示自己定义样式。具体带啊如下

    <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8"/>
      <title>鼠标显示图_haley</title>
      <style>
        h2{text-align:center;width:720px;margin:10px auto;}
        table{
            border:1px solid #000;
            border-collapse:collapse;
            width:720px;
            margin:0 auto;
        }
        th,td{border:1px solid #000;height:30px;}
        tr>td:first-child{text-align:center;width:80px;}
        tr>td:nth-child(2){padding-left:5px;}
        tr:nth-child(even){background:#eee;}
    
        tr:nth-child(2){cursor:url(http://files.cnblogs.com/files/haley168/ico2.ico),auto;}
        tr:nth-child(3){cursor:default;}
        tr:nth-child(4){cursor:auto}
        tr:nth-child(5){cursor:crosshair}
        tr:nth-child(6){cursor:pointer}
        tr:nth-child(7){cursor:move}
        tr:nth-child(8){cursor:e-resize}
        tr:nth-child(9){cursor:ne-resize}
        tr:nth-child(10){cursor:nw-resize}
        tr:nth-child(11){cursor:n-resize}
        tr:nth-child(12){cursor:se-resize}
        tr:nth-child(13){cursor:sw-resize}
        tr:nth-child(14){cursor:s-resize}
        tr:nth-child(15){cursor:w-resize}
        tr:nth-child(16){cursor:text}
        tr:nth-child(17){cursor:wait}
        tr:nth-child(18){cursor:help}
      </style>
     </head>
     <body>
            <h2>鼠标图标--cursor:pointer</h2>
            <table>
                <tr><th></th><th>描述</th></tr>
                <tr><td>url</td><td>需使用的自定义光标的 URL。(支持的格式cur,ico)注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。</td></tr>
                <tr><td>default</td><td>默认光标(通常是一个箭头)</td></tr>
                <tr><td>auto</td><td>默认。浏览器设置的光标。 </td></tr>
                <tr><td>crosshair</td><td>光标呈现为十字线。 </td></tr>
                <tr><td>pointer</td><td>光标呈现为指示链接的指针(一只手) </td></tr>
                <tr><td>move</td><td>此光标指示某对象可被移动。 </td></tr>
                <tr><td>e-resize</td><td>此光标指示矩形框的边缘可被向右(东)移动。 </td></tr>
                <tr><td>ne-resize</td><td>此光标指示矩形框的边缘可被向上及向右移动(北/东)。</td></tr> 
                <tr><td>nw-resize</td><td>此光标指示矩形框的边缘可被向上及向左移动(北/西)。</td></tr> 
                <tr><td>n-resize</td><td>此光标指示矩形框的边缘可被向上(北)移动。 </td></tr>
                <tr><td>se-resize</td><td>此光标指示矩形框的边缘可被向下及向右移动(南/东)。</td></tr> 
                <tr><td>sw-resize</td><td>此光标指示矩形框的边缘可被向下及向左移动(南/西)。</td></tr> 
                <tr><td>s-resize</td><td>此光标指示矩形框的边缘可被向下移动(南)。 </td></tr>
                <tr><td>w-resize</td><td>此光标指示矩形框的边缘可被向左移动(西)。 </td></tr>
                <tr><td>text</td><td>此光标指示文本。 </td></tr>
                <tr><td>wait</td><td>此光标指示程序正忙(通常是一只表或沙漏)。 </td></tr>
                <tr><td>help</td><td>此光标指示可用的帮助(通常是一个问号或一个气球)。</td></tr> 
            </table>
     </body>
    </html>
    haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    201771010101 白玛次仁 《2018面向对象程序设计(Java)》第十六周学习总结
    201771010101 白玛次仁 《2018面向对象程序设计(Java)》第十五周学习总结
    201771010101 白玛次仁 《2018面向对象程序设计(Java)》第十四周学习总结
    201771010101 白玛次仁 《2018面向对象程序设计(Java)》第十三周学习总结
    十三周作业
    第十三周上机作业
    第十二周作业
    第十二周上机练习
    第十一周作业
    第十一周上机练习
  • 原文地址:https://www.cnblogs.com/haley168/p/cursor.html
Copyright © 2011-2022 走看看