CSS鼠标style/事件

BlueNfish

已于 2022-08-24 11:50:35 修改

阅读量458

点赞数

分类专栏： Vue2 文章标签： css javascript 前端

于 2022-08-24 11:47:21 首次发布

本文链接：https://blog.csdn.net/qq_42874916/article/details/126501595

版权

Vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.H5

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>123</title>

    <style>

      div{

          width:100px;

          height:100px;

          background-color:red; 

      }

      div:hover{

        cursor:pointer;

      }

   </style>

  </head>

  <body>

      <div></div>

  </body>

</html>

效果：
图片来源：https://www.php.cn/css-tutorial-484950.html

2.直接使用CSS样式改变

style="cursor:pointer;"

3.使用JS触发事件改变原样式

在鼠标事件onmouseover（鼠标移动到元素上触发事件）触发时设置对应的样式：

// 使用在元素的标签上的事件
// 第一种方式
onmouseover="this.style.cursor='mouseHand'"
 
// 第二种方式
onmouseover="this.ClassName=‘mouseHand’“

4.cursor属性的常用取值

default                 ：标准箭头光标 
pointer, hand           ：手形光标  
auto                    ：标准光标  
all-scroll              ：三角方向光标  
move                    ：移动光标  
crosshair               ：十字光标 
wait                    ：0等待光标  
text                    ：I字母形光标  
vertical-text           ：水平I形光标  
no-drop                 ：不可拖动光标  
not-allowed             ：无效光标  
help                    ：帮助光标