跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
focus

21 篇文章
{
,

}
文章“在子元素处于 :focus 状态时保持父元素可见”的直接链接
:focus-within 无障碍 焦点

在子元素处于 :focus 状态时保持父元素可见

假设我们有一个 <div></div>。

我们只希望这个 div 在悬停时可见,所以

div:hover { 
  opacity: 1; 
}

为了无障碍性,我们需要焦点样式,所以

div:hover,
div:focus { 
  opacity: 1; 
}

但是 div 的……

Avatar of Chris Coyier
Chris Coyier 于 2017 年 12 月 12 日
文章“去除难看的 :focus 环(并保留它)”的直接链接
无障碍 焦点

去除难看的 :focus 环(并保留它)

David Gilbertson

去除焦点轮廓就像从学校移除无障碍坡道,因为它不符合美观。

所以 David 展示了如何除非检测到用户正在使用 Tab 键,否则移除焦点轮廓,然后……

Avatar of Chris Coyier
Chris Coyier 于 2021 年 6 月 16 日
文章“非交互式元素上的焦点样式?”的直接链接
无障碍 焦点

非交互式元素上的焦点样式?

上个月,Heather Migliorisi 探讨了平滑滚动的无障碍性。为了实现平滑滚动,您需要

  1. 检查单击的链接是否为 #jump 链接
  2. 阻止浏览器默认行为,即立即跳转到该元素
……
Avatar of Chris Coyier
Chris Coyier 于 2017 年 5 月 2 日
  • 更新
  • 1
  • 2
  • 3

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告!
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.