在div内的输入焦点上，显示邻居div

Question

我想显示。product-list div当专注于。search-area div的输入时。我正在尝试但未显示。这仅需要通过CSS来完成。不通过脚本。有可能吗？

<div class="search_wrap">

  <div class="search_area">
    <input id="shop-search" type="text" placeholder="Select Shops>
    <img class="search_icon" src="../../assets/icons/search.svg"/>
  </div>

  <div class="product_list">
    <ul>
      <li></li>
    </ul>
  </div>

</div>

Answer 1

[仅当两个div具有相同的父级时，您才能执行此操作，因此，我建议将product_list类移到div中。您可以通过添加以下CSS来实现此目的：

.product_list {
  display: none;
}

#shop-search:focus~.product_list {
  display: block;
}

~或general sibling combinator用于在#shop-search输入之后的某处，但与其共享父级。

.product_list {
  display: none;
}

#shop-search:focus~.product_list {
  display: block;
}

<div class="search_wrap">

  <div class="search_area">
    <input id="shop-search" type="text" placeholder="Select Shops">
    <img class="search_icon" src="../../assets/icons/search.svg">


    <div class="product_list">
      <ul>
        <li>Content</li>
      </ul>
    </div>

  </div>
  
  </div>