Question

我试图让div元素在焦点上可见，但它不起作用。如果我改变焦点以悬停它

JSFIDDLE https://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;
}

Answer 1

只有a代码才可以使用，所以请使用下面的代码，它会起作用...我已经更新了jsfiddle

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

Answer 2

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

.delete{
  display: none;
}

因此永远不会点击<div>并且永远无法获得焦点。

而是尝试关注<a>标记：

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

然后移除tabindex="0"上的<div>。

CSS如何使焦点在焦点上不可见

2 个答案: