链接和键盘焦点

Question

这个问题是关于各种链接的键盘焦点。

div内的链接 - 可以通过键盘tabindex访问下面这样的简单链接，但div和链接之间存在间隙，因此鼠标可以悬停在div上而无需设置关闭链接的:hover事件。

<div class="greenButton">
  <%= link_to "Back", :back %>
</div>

Div内部链接 - 下面的代码将:hover个事件保存在一起（通常样式化链接的行为与我期望的一样）但键盘没有通过tabindex获取它。

<%= link_to :back do %>
  <div class="greenButton">Back</div>
<% end %>

如何使用tabindex更好地格式化底层情况？

注意：手动tabindex声明不是一个好的选择，因为这是用于多个页面的代码，其中有不同数量的元素。是否有Rails-y方法可以做到这一点？

Answer 1

  

通常，块级元素可能包含内联元素和其他元素   块级元素。通常，内联元素可能只包含数据   和其他内联元素。在这种结构上的区别是固有的   块元素创建比内联更“大”的结构   元件。

Source

换句话说：您不应将像div这样的块元素放在像a这样的内联元素中。我建议丢失div并设置a元素的样式：

<%= link_to "Back", :back, :class => 'greenButton' %>

如果这不可行，您可以尝试将div替换为span并查看是否拾取了tabindex。

Answer 2

<%= link_to "Back", :back, :class => 'greenButton', :style => 'display: block;' %>