How to set mouse hover to change mouse shape in css-CSS Tutorial-php.cn

How to set mouse hover to change mouse shape in css

WBOY

Release： 2021-11-29 10:56:07

Original

9522 people have browsed it

In CSS, you can use the ":hover" selector and the cursor attribute to set the mouse hover to change the shape of the mouse. The ":hover" selector is used to select the element on which the mouse pointer is floating, and the cursor attribute is used to specify Mouse shape, the syntax is "element:hover{cursor:mouse shape;}".

How to set mouse hover to change mouse shape in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the mouse hover to change the mouse shape in css

In css, you can use cursor to set the mouse shape, and the cursor attribute stipulates that it should be displayed The type (shape) of the cursor.

Also: the hover selector is used to select the element on which the mouse pointer is floating.

Let’s take a look at the example below:

<!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>

Copy after login

Output result:

How to set mouse hover to change mouse shape in css

When the attribute value of cursor is crosshair, The example is as follows:

<!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:crosshair;
      }
   </style>
  </head>
  <body>
      <div></div>
  </body>
</html>

Copy after login

Output result:

How to set mouse hover to change mouse shape in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set mouse hover to change mouse shape in css. For more information, please follow other related articles on the PHP Chinese website!