CSS如何使div在焦点上可见不起作用

Posted 2023-05-08

【中文标题】CSS如何使div在焦点上可见不起作用

【英文标题】：CSS how to make div visible on focus not working

【发布时间】：2018-05-09 13:06:20

【问题描述】：

我正在尝试使 div 元素在焦点上可见，但它不起作用。如果我将焦点更改为悬停它会起作用

JSFIDDLEhttps://jsfiddle.net/9bo81jyy/8/

html

<div class="test">
  <nav class="nav">
    <ul class="navtabs">
      <li>
        <a href="showMe/1">
          <div class= "inside">
            <div tabindex="0" class="delete">
              <button tabindex="-1" class="fa-times-circle"> </button>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </nav>
</div>

CSS

.nav > ul.navtabs > li > a > div:focus .delete
  display: inline !important;

.delete
  display: none;

【问题讨论】：

焦点发生在你<tab> 到一个元素上。 <div> 元素默认情况下不可聚焦（Google 'tabindex html'）。在链接中放置<button> 也是一个坏主意。当您按下<button> 时，您不想去showMe/1 对吧？ :)

按钮是一个关闭图标。为 div 添加了标签索引，使其可聚焦

是的，但是“关闭”图标位于“showMe/1”链接中，这意味着单击按钮可能会触发链接。在这种情况下，可能不会执行按钮操作。一般来说，将它移到链接标签之外会更好，因为它服务于它自己的目的（或者好吧，所以我认为:)）。

您不能将a 和button 等“交互式”元素相互嵌套，这是无效的HTML。

【参考方案1】：

只有a 标记是可聚焦的，所以使用下面的代码就可以了……我已经更新了jsfiddle

.nav > ul.navtabs > li > a:focus .delete
  border: 1px solid red;
  display: inline;

【参考方案2】：

由于这个 CSS，这个 <div tabindex="0" class="delete"> 在 DOM 中不可用：

.delete
  display: none;

这样<div> 永远不会被点击，也永远不会获得焦点。

尝试关注<a>标签：

ul.navtabs a:focus .delete
  display: inline !important;

并删除<div> 上的tabindex="0"。