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>

参考链接

通过以上方法和示例代码，你应该能够解决CSS焦点和悬停不起作用的问题。

页面内容是否对你有帮助？

有帮助

没帮助

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

、、、、

我试着用:hover :focus和:focus-I来解决这个问题，但它们似乎都不起作用。我做错了什么？

浏览 51提问于2021-11-22得票数 1

回答已采纳

1回答

CSS悬停、焦点和“非焦点”

、、

第一次是在悬停时，第二次是聚焦(菜单图标按下)，最后是非聚焦(菜单图标再次按下)。margin: 0.3em; transition-duration: 600ms;} margin-left: 1.4em; CSS></span>

浏览 4提问于2017-04-10得票数 4

回答已采纳

2回答

当我使用物化css时，如何改变谷歌图标的颜色？

、、

我使用的所有css都来自。

浏览 7提问于2016-03-22得票数 1

回答已采纳

1回答

隐藏:焦点如果用户:悬停？

我的css中有基于的这个。 display: block; display: block;当前:悬停文本和:焦点文本相互混淆。

浏览 3提问于2017-01-17得票数 1

回答已采纳

1回答

单击链接时，纯HTML/CSS下拉菜单关闭(链接不打开)

、、、

我遵循了一个教程，使用HTML和CSS构建广告下拉菜单，这只是因为我还没有真正进入JS，除了一个问题之外，它还能正常工作。这是我的页面和代码。 <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="styleshe

浏览 1提问于2016-03-06得票数 0

回答已采纳

1回答

元素悬停时不显示顺风活动样式

、、、

我正在与TailwindCSS合作，并正在制作一个简单的按钮，我希望在悬停时有一个阴影，然后在聚焦或活动时缩小。悬停样式起作用，但激活样式不起作用。hover:shadow-lg focus:bounce-sm hover:translate-t-2px transition-fast"></router-link> .bounce-sm {

浏览 2提问于2019-11-14得票数 3

1回答

为了解决这个问题，我使用jQuery只在页面加载时在和隐藏可编辑字段中显示注释的一部分，但当我悬停在页面上时，它就展开了。我遇到的问题是，所有其他字段都是可以用x可编辑的焦点选择的，我也想让这个字段可选。如果我悬停在字段上，我可以在没有任何问题的情况下进入它，但我感兴趣的是如何才能将其插入并触发可编辑字段。我试着查看:focus和document.activeElement()，但没有找到让它们工作的方法。我将示例代码添加到中。

浏览 2提问于2013-03-12得票数 2

2回答

在哪里可以找到或重写_navbar.scss？

、、、、

我想改变导航链接的悬停/活动效果，但我不知道如何覆盖它，或者从哪里呈现或控制它。它显示悬停/焦点是由我尝试过在许多地方修改和重写CSS，我也尝试过自己的_navbar.css和我自己的类，但是它不起作用。

浏览 2提问于2018-04-27得票数 5

回答已采纳

3回答

jQuery对焦点没有反应

){}); 使用上面的代码，我希望子菜单项在焦点和悬停时都能响应，但是它在聚焦时不起作用。有趣的是，CSS :focus伪类工作得很好。编辑:我说“CSS :focus伪类运行良好”-我的意思是:focus伪类可以很好地更改CSS属性，但是没有任何方法(包括在选择器中使用:fo

浏览 1提问于2012-04-05得票数 0

2回答

如何移除:当浏览器窗口突然失去焦点时，悬停在元素上？

、、

例如:打开并按如下方式放置窗口：

浏览 12提问于2012-08-15得票数 1

回答已采纳

3回答

toggleClass条件不工作/图标在移动上单击两次后消失。

、、

我正在尝试用jquery动画按钮。在桌面上，他们是好的，但在移动按钮消失后，两次点击。联署材料： function() { $(this).addClass('fa-plus-circle'); f

浏览 3提问于2018-04-05得票数 0

回答已采纳

1回答

切换按钮颜色点击

、

问题是，一旦按钮有焦点，无论点击多少次，颜色都不会改变。要重新启用效果，我必须单击其他地方，使按钮失去焦点。

浏览 1提问于2018-10-23得票数 0

回答已采纳

1回答

如何在jQuery下拉菜单中向父元素添加/删除CSS类

、、、

所有菜单链接:悬停样式。一旦父母点击，子菜单滑下，你悬停，子菜单隐藏回来，确定到目前为止。我想给父级Add/Remove my CSS class一个CSS类(.focus)，当单击它来改变它的背景颜色时，它的“焦点”状态是假的。在jsfiddle中，当您单击Add/Remove my CSS class时，您将看到它的背景颜色在一秒钟内变为红色，这是由于:active CSS样式所致。因此，即使您将鼠标悬停在子菜单链接上，父链接

浏览 2提问于2011-11-22得票数 1

回答已采纳

2回答

CSS如何使div在焦点不工作时可见

、、

我试图使div元素在焦点上可见，但它不起作用。如果我改变焦点来悬停，它就能工作。"> </button> </div> </li> </nav>CSS

浏览 2提问于2017-11-25得票数 1

回答已采纳

3回答

CSS:用于触摸屏逆向工程的悬停

、、、、

我已经看过了整个HTML，CSS，JS，没有什么特别的，所以如果有人有线索可以有一个峰值，我会非常感兴趣的，他们发现了什么。

浏览 3提问于2011-04-12得票数 1

2回答

鼠标悬停时隐藏搜索文本框关闭按钮

、

我不想在鼠标悬停时显示关闭按钮，只有在文本框处于焦点状态时才会显示关闭按钮。任何人都可以帮助我找到这个问题的解决方案。

浏览 13提问于2017-07-31得票数 0

回答已采纳

2回答

为什么Bootstrap的文字装饰:没有一个不起作用？

、、

问题：细分：} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

浏览 12提问于2017-03-23得票数 3

回答已采纳

1回答

在鼠标悬停和焦点时更改Mat Expansion中内容的颜色

、、

我正在编写css来改变焦点和悬停的文本和箭头指示器的颜色。但是，指示器箭头单独起作用。我希望当你将鼠标悬停在整个面板上时，它会发生变化。目前，箭头指示器仅在您将鼠标悬停在其上时才会更改，基本上是当整个面板具有焦点或悬停时才会更改。将标题和指示器更改为my css：https://stackblitz.com/edit/angular-imycgv?file=s

浏览 11提问于2019-06-25得票数 0

回答已采纳

1回答

使用CSS选择活动元素或焦点元素的同级元素？

、、、

我正在尝试实现类似按钮的功能，以显示和隐藏错误使用CSS。 display: list-item;但在IE7中不支持焦点。:active不起作用。在选择兄弟姐妹时，只有悬停似乎是有效的。但是，我想实现一个类似按钮的行为。在IE 7中是否可以只使用CSS？#ShowErro

浏览 3提问于2013-09-11得票数 2

1回答

将CSS嵌套重写为SASS

、、

所以我遇到了一个CSS片段 & > :is(.moon, .sun, .sun-beams) { stroke: var(--icon-fill-hover); }提交人声称 CSS再次使用@nest，这一次用于制作一个新的选择器，该选择器的目标是正在悬停或聚焦的父按钮。@nest .主题-切

浏览 13提问于2022-04-05得票数 0

点击加载更多