Question

问题：我希望隐藏搜索框（HTML表单）的提交按钮，直到用户点击文本输入框为止。

HTML：

<div class="views-exposed-form">
 <div class="views-exposed-widgets clearfix">
  <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
   <div class="views-widget">
    <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
     <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
    </div>
   </div>
  </div>
  <div class="views-exposed-widget views-submit-button">
   <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">   
  </div>
 </div>
</div>

我尝试了什么我知道在使用CSS时至少可以使用某些类型的条件。就像这样：how-to-affect-other-elements-when-a-div-is-hovered

我现在的问题是我的元素不是直接在彼此内部。当我将鼠标悬停在包装div上时，我已经玩过类似于显示按钮的东西。

隐藏起来像这样：

#block-views-exp-display-products-page .views-submit-button {
  visibility: hidden;
}

我现在真正需要的是这样的事情：

#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
  visibility: visible;
}

但我不知道该怎么做。

修改：

如果有人遇到这个问题，这是我的最终解决方案：

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('click', function(){
         $("#edit-submit-display-products").css("visibility", "visible");
      });
   });
</script>
<script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('focusout', function(){
        if (!$("#edit-submit-display-products").is(":hover")) {
          $("#edit-submit-display-products").css("visibility", "hidden");
          }
      });
   });
</script>

只要您单击输入字段外部，这将隐藏按钮，并在尝试单击按钮时阻止按钮消失。

Answer 1

您可以利用:focus-within。

焦点在CSS伪类中表示已获得焦点或包含已获得焦点的元素的元素。换句话说，它表示一个元素，它本身与：focus伪类匹配，或者有一个与：focus匹配的后代。（这包括阴影树中的后代。）

^MDN

虽然支持非IE / Edge 。

类似的东西：

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within + .views-submit-button input {
  visibility: visible
}

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within+.views-submit-button input {
  visibility: visible
}

<div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
    <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
      <div class="views-widget">
        <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
          <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
        </div>
      </div>
    </div>
    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
    </div>
  </div>
</div>

Answer 2

您可以添加Javascript（jquery）来解决此问题：

<script src="code.jquery.com/jquery-latest.min.js"></script>

<script>
 $(document).ready(function() {
    $("#edit-search-api-views-fulltext").on('click', function(){
       $("#edit-submit-display-products").css("visibility", "visible");
    });
 });
</script>

当输入字段被聚焦时，用CSS隐藏提交按钮

2 个答案: