时间戳

首页 > 解决方案 > 聚焦非父元素时如何在同级中添加CSS效果

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

问题描述

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

但是我想使用 :focus 属性，因此用户只有在单击 que 输入时才会看到该消息。

我有，但它不起作用：

.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>

我怎样才能做到这一点？我很困惑，因为字幕实际上是表单的兄弟。

标签： cssinputfocus

解决方案

您可以: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>

推荐阅读