发布时间:2023-04-27 文章分类:WEB开发, 电脑百科 投稿人:王小丽 字号: 默认 | | 超大 打印

实现这个效果一共有两种方式。

        1.第一种方式:(先两个div)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个</title>
	</head>
        <style>
        div{
        cursor:pointer;
            }
</style>
	<body>
    <div href="#">11 </div>
    <div href="#">22 </div>
	</body>
</html>

                2.用a包裹


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个</title>
	</head>
	<body>
		<a href="">
            <div href="#">11 </div>
            <div href="#">22 </div>
        </a>
	</body>
</html>

        除此之外cursor还有别的属性

        auto                                     :标准光标  
        default                                 :标准箭头  
        pointer, hand                       :手形光标  
        wait                                     :等待光标  
        text                                      :I形光标  
        vertical-text                         :水平I形光标  
        no-drop                               :不可拖动光标  
        not-allowed                         :无效光标  
        help                                     :帮助光标  
        all-scroll                               :三角方向标  
        move                                   :移动标  
        crosshair                           :十字标  
        e-resize                                  :此光标指示矩形框的边缘可被向右(东)移动。
        n-resize                                  :此光标指示矩形框的边缘可被向上(北)移动。
        nw-resize                                  :此光标指示矩形框的边缘可被向上及向左移动(北/西)。
        w-resize                                  :此光标指示矩形框的边缘可被向左移动(西)
        s-resize                                  :此光标指示矩形框的边缘可被向下移动(南)
        se-resize                                  :此光标指示矩形框的边缘可被向下及向右移动(南/东)。

        sw-resize                                :此光标指示矩形框的边缘可被向下及向左移动(南/西)