css鼠标样式

2022-04-13 07:57:56 浏览数 (1)

1、cursor属性

在CSS中,使用cursor属性来定义鼠标的样式。

语法:

cursor:属性值;

说明:

cursor属性取值如下,默认值为default。大家可能会惊呆,我晕,cursor属性值这么多,怎么记呀?其实大家不用担心,在实际开发中,我们一般只用到“default”和“pointer”这两个属性值,其他的一般都很少用得上。如果实在没办法还需要其他的,那就回来查这种表就行了。

举例:

代码语言:javascript复制
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>cursor属性</title>

    <style type="text/css">

        div

        {

            width:100px;

            height:30px;

            line-height:30px;

            text-align:center;

            border:1px solid #CCCCCC;

            background-color: #40B20F;

            color:white;

            font-size:14px;

            font-weight:bold;

        }

        #div_default{cursor:default;}

        #div_pointer{cursor:pointer;}

    </style>

</head>

<body>

    <div id="div_default">鼠标默认样式</div>

    <div id="div_pointer">鼠标手状样式</div>

</body>

</html>

在浏览器预览效果如下:

分析:

我们可以看到,默认情况下鼠标是斜箭头。

大家请记住,一般情况下,我们只需要采用浏览器默认的鼠标样式就可以了,如果实在特别需要的时候可以用“cursor:pointer;”。对于cursor的其他属性值,我们一般用不上。因此大家无需花力气去记忆这些没用的属性。

0 人点赞