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>

Answer 2

您可以使用JavaScript而不是CSS显示div。另外，将display:none;指令分离到其自己的CSS类中，以便可以在不删除其余样式的情况下将其删除。

此方法是标准方法，将在所有客户中使用。

document.querySelector("input.inputclass").addEventListener("focus", function(){
  document.querySelector(".ulclass").classList.remove("hidden");
});

.ulclass {
  background: #f0a;
  height: 200px;
  width: 200px;
}

.hidden {  display: none; }

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

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

2 个答案: