CSS

Question

这是我的问题。我正在构建投资组合页面，现在我想让那些无法使用鼠标的人轻松导航。

outline属性有什么作用？它提供视觉反馈使用TAB导航Web文档时具有“焦点”的链接键（或等效的）。这对不能使用的人特别有用老鼠或有视力障碍。如果你删除了你的轮廓使这些人无法访问您的网站。

我构建了它，因此您可以使用TAB键浏览网页上的所有链接，然后您可以使用ENTER键打开该链接。

但是...

我有很好的叠加视觉效果。您可以看到应用程序的图像，只有当您将鼠标悬停在该图片上方时，您才能看到链接。

所以TAB正在运行，您可以使用键盘选择链接，但无法看到活动链接，因为该叠加效果仅适用于鼠标（当鼠标悬停在特定图片上方时）。

很难用文字解释，所以我录制了一段短片： https://youtu.be/IQbXL7iyG6w?t=5

知道怎么解决这个问题吗？ TAB导航也应该触发叠加效果。

GitHub代码： https://github.com/elminsterrr/portfolio

Answer 1

您可以使用简单的jquery代码执行此操作。首先改变你的CSS

CSS

改变这个：

#portfolio .inner-content:hover .overlay-content {
  top: 0px;
  z-index: 1;
  background: rgba(0,0,0,0.9);
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
}

使用：

#portfolio .inner-content:hover .overlay-content {
  top: 0px;
  z-index: 1;
  background: rgba(0,0,0,0.9);
}
#portfolio .inner-content .overlay-content.focus_test{
    top: 0px;
  z-index: 1;
  background: rgba(0,0,0,0.9);
}

的jQuery：

 $('.overlay-content p a').focus(function(){
    $(this).parents('.overlay-content').addClass('focus_test');
  });
  $('.overlay-content p a').blur(function(){
      $(this).parents('.overlay-content').removeClass('focus_test');
  });

Answer 2

使用$ bash --version GNU bash, version 4.4.12(3)-release (x86_64-unknown-cygwin)元素获得焦点时，您会在:hover上显示叠加层，因此您必须将TAB选择器添加到css中才能显示叠加层。

:focus =＆gt; .my-class:hover .my-overlay { ... }

叠加效果适用于鼠标，但不适用于键盘

2 个答案:

CSS

的jQuery：