主页 / 问题 / 1372597
Accepted
Боков Глеб
Asked:2022-06-18 16:45:51 +0000 UTC2022-06-18 16:45:51 +0000 UTC

在为移动设备布局时，为按钮和链接的 :focus 伪类添加样式会给我们带来什么？

  • 772

:focus在为移动设备布局时为按钮和链接的伪类添加样式是否有意义？事实上，在移动设备上，一个事件:focus（如:hover），如果它存在，不清楚何时以及最重要的是为什么它会起作用。

我预见到了反对意见：“所以桌面设备需要这种状态的样式 - 以便对带有 Tab 键的按钮迭代做出反应。而且由于在自适应设计中我们事先不知道用户控制哪个设备，那么你仍然需要为:focusand :hover因此，在现代 CSS 中，有一个类似 的媒体查询@media (hover: hover)，您可以使用它应用样式，特别是 - 对于伪类:focus，并且:hover仅在事件:hover有意义存在的那些设备上（即主要在桌面设备上）。我不应该这样做有什么合理的理由吗？

css

1 个回答

  1. Best Answer

    :hover真的不起作用，因为没有光标。纯粹从技术上讲，在手机上，可以打开光标，甚至可以连接鼠标，但这更多是为了“玩转”。

    但是伪:focus类在移动设备上运行良好。此外，它通常用于创建动画以替代:hover. 此外，在一些视频托管网站上，伪:focus类用于播放视频预览。

    下面是放大具有焦点的图像的示例。请注意，我在图像中添加了 tabindex 属性，因为默认情况下图像不能成为焦点。

    div {
  display: inline-block;
  overflow: hidden;
}

div img {
  display: block;
  transition: 1s;
}

div img:focus {
  transform: scale(2);
}
    <div><img src="https://fakeimg.pl/100x100/" alt="" tabindex="1"></div>
<div><img src="https://fakeimg.pl/100x100/" alt="" tabindex="2"></div>
<div><img src="https://fakeimg.pl/100x100/" alt="" tabindex="3"></div>

    • 1

相关问题