Home > Article > Web Front-end > How to set mouse hover to change mouse shape in css
How to set mouse hover to change mouse shape in css
- WBOYOriginal
- 2021-11-29 10:56:079498browse
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;}".
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>Output result:
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>Output result:
(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!