用css 添加手状样式,鼠标移上去变小手

用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style.cursor='hand'"cursor其他取值 auto ：标准光标 ...用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过

小杨要努力哇

17659人浏览 · 2022-07-17 23:59:10

小杨要努力哇 · 2022-07-17 23:59:10 发布

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

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 ：此光标指示矩形框的边缘可被向下及向右移动（南/东）。