html - 悬停事件不会在 devtools 中显示更改的样式,直到我强制 devtools 的悬停状态

标签 html css devtools

我有这个简单的代码

<style>input:hover{border: 3px solid blue;}</style>
<input type="text">

预期行为:当我将鼠标悬停在输入上时,新样式应该出现在 devtools 样式部分,但它仅在我通过 devtools(而不是鼠标)强制悬停状态时出现。我记得它应该在两种情况下都显示样式,我错了吗?这在 chrome 和 firefox devtools 中都会发生,所以我无法真正理解发生了什么,我使用 css 3 年,我不记得这个问题。

enter image description here

最佳答案

我相信大多数开发工具过去都用于显示悬停状态,但现在我认为没有任何工具可以显示悬停状态(无需点击)。可能是因为他们添加了对如此多的元素状态的支持,如果他们将它们全部显示出来,可能会变得困惑。

关于html - 悬停事件不会在 devtools 中显示更改的样式,直到我强制 devtools 的悬停状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50747226/

相关文章:

html - 垂直对齐 Bootstrap 不起作用

r - 在 RStudio 中构建并重新加载会生成 'Save File' 错误

r - 在 RStudio 中运行 devtools::load_all ("."时出现字符(0)警告

r - 发布 R 包版本后,我应该如何处理 CRAN-SUBMISSION 文件

javascript - Chrome 错误或编码错误?目标页面中的 anchor /ID 链接不起作用

jQuery - css 在更高的 Z-index 上禁用 div

html - CSS 只能跨浏览器剪 Angular ?

html - 使 div 可缩放并保留其图像大小

javascript - 使用 .hover() 时如何用链接标记替换文本?

html - 带有 H1 图像替换的语义标志......没有什么可以点击的?