CSS焦点-范围内和悬停不起作用

CSS焦点（Focus）和悬停（Hover）不起作用的基础概念

CSS中的focus和hover是两种伪类选择器，用于改变元素在特定状态下的样式。

Focus：当元素获得焦点时，例如通过键盘导航到该元素时，就会触发focus状态。
Hover：当鼠标指针悬停在元素上时，就会触发hover状态。

类型

Focus：通常用于表单元素、按钮、链接等。
Hover：适用于几乎所有的HTML元素。

应用场景

表单验证：使用focus状态来高亮显示未填写的必填字段。
导航菜单：使用hover状态来显示下拉菜单或改变菜单项的颜色。
工具提示：结合focus和hover来显示额外的信息。

可能遇到的问题及解决方法

问题1：焦点和悬停样式没有生效

原因：

CSS选择器不正确。
样式被其他CSS规则覆盖。
JavaScript干扰了焦点或悬停状态。

解决方法：

检查选择器：
检查选择器：
检查样式覆盖：
检查样式覆盖：
检查JavaScript：
检查JavaScript：

问题2：焦点样式在某些浏览器中不起作用

原因：

浏览器兼容性问题。
缺少必要的ARIA属性。

解决方法：

添加ARIA属性：
添加ARIA属性：
使用Polyfill：
- 可以使用focus-visible polyfill来确保在所有浏览器中都能正确显示焦点样式。
- 参考链接：focus-visible Polyfill

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Focus and Hover Example</title>
    <style>
        input:focus, button:hover {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>