如何在聚焦非 parent 元素时在同级中添加 CSS 效果

Question

我知道 CSS 不能向后工作，但我试图通过更改其不透明度在用户单击输入时显示一条消息。

但我想使用 :focus 属性，这样用户只有在单击“que input”时才会看到消息。

我有但是没用：

.td_search_subtitle {
  opacity: 0;
}

.td-search-form-widget .td-widget-search-input:focus .td_search_subtitle {
  opacity: 1
}

<form method="get" class="td-search-form-widget" action="https://example.com/">
  <div role="search">
    <input class="td-widget-search-input" type="text" value="ariana" name="s" id="s">
    <input class="wpb_button wpb_btn-inverse btn" type="submit" id="searchsubmit" value="Search">
  </div>

  <div class="td_search_subtitle">Message should appear here</div>
</form>

我怎样才能做到这一点？我很困惑，因为副标题实际上是表格的兄弟。

Answer 1

您可以在父级上使用 :focus-within 和 +（选择下一个兄弟）：

.td_search_subtitle {
  opacity: 0;
}
div[role="search"]:focus-within + .td_search_subtitle {
  opacity: 1;
}

<form method="get" class="td-search-form-widget" action="https://example.com/">
  <div role="search">
    <input class="td-widget-search-input" type="text" value="ariana" name="s" id="s">
    <input class="wpb_button wpb_btn-inverse btn" type="submit" id="searchsubmit" value="Search">
  </div>

  <div class="td_search_subtitle">Message should appear here</div>
</form>

如何在聚焦非 parent 元素时在同级中添加 CSS 效果

How to add CSS effect in a sibling when focusing a non parent element

css

focus

input