单击div内的链接，该链接显示输入字段何时处于焦点

Question

如此简单的CSS可以在焦点对准输入时显示div：

.ulclass {
  background: #f0a;
  display: none;
  height: 200px;
  width: 200px;
}
form:focus-within + ul.ulclass {
  display: block;
}

<form>
  <input type="text" value="Enter some text here" class="inputclass">
</form>
<ul class="ulclass">
  <a href="https://google.com">link</a>
</ul>

我在所显示的div内有一个链接，但是我无法单击它，因为这样做会在触发链接之前模糊输入字段。有人对如何更好地做到这一点有任何建议吗？

Answer 1

将ulclass带有:hover伪类的和添加到focus规则：

.ulclass {
  background: #f0a;
  display: none;
  height: 200px;
  width: 200px;
}
form:focus-within + ul.ulclass, ul.ulclass:hover {
  display: block;
}

<form>
  <input type="text" value="Enter some text here" class="inputclass">
</form>
<ul class="ulclass">
  <a href="https://google.com">link</a>
</ul>