css鼠标事件

CSS鼠标事件基础概念

CSS鼠标事件是指通过CSS来响应用户的鼠标操作，如悬停（hover）、点击（active）等。这些事件可以通过CSS伪类来实现，不需要编写JavaScript代码。

类型

:hover：当鼠标悬停在元素上时触发。
:active：当鼠标按下并保持在元素上时触发。
:focus：当元素获得焦点时触发（例如通过Tab键导航）。
:visited：用于链接，表示用户已经访问过该链接。

应用场景

导航菜单：通过:hover伪类实现鼠标悬停时菜单项的高亮显示。
按钮样式：通过:active伪类实现按钮按下时的视觉反馈。
表单验证：通过:focus伪类实现输入框获得焦点时的样式变化。
链接样式：通过:visited伪类区分用户已访问和未访问的链接。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Mouse Events</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #45a049;
        }

        .button:active {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>