CSS样式-鼠标样式

cursor：

default（缺省状态）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        div:hover {
            cursor: default;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>
 

pointer(手型)

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        div:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

move(移动)

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        div:hover {
            cursor: move;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

text(文本，i型光标)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        div:hover {
            cursor: text;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>
posted @ 2021-03-28 15:26  #Friday  阅读(59)  评论(0)    收藏  举报