Question

我在这里的网站上工作：http://www.estiponagroup.com/dev/

我实际上希望搜索框显示在导航菜单下方，但当我将其放置在那里时，我无法在框中单击以执行搜索。

我在标题之外添加了相同的搜索字段来测试它是否正常工作。

我无法弄清楚为什么标题区域中的搜索不起作用。我已经尝试将z-index添加到搜索div但它不起作用。

CSS：

.search-main-nav {
    float:right;
    width: 200px;
    z-index:999;
}
.search-main-nav input{
    border:2px solid #333;
    color:#333;
}
.search-main-nav label {
    color:#333;
    margin-left: -25px
}
.clear {
    clear:both;
}

HTML（2个搜索功能位于</header>代码的上方和下方：

<div class="wrapper" id="main-wrapper">
  <header class="main-header menu-type-standard-menu">
    <div class="container">
      <div class="logo-and-menu-container">
        <div class="logo-column">
          <style>.logo-image { width: 78px; }</style>
          <a href="http://www.estiponagroup.com/dev" class="header-logo logo-image">
            <img src="//www.estiponagroup.com/dev/wp-content/uploads/2015/08/eg-logo.png" width="78" height="62" alt="logo" />
          </a>
        </div>

        <div class="social-links">
          <a class="facebook" target="_blank" href="https://www.facebook.com/estiponagroup"><i class="icon fa fa-facebook"></i></a>
        </div>

        <div class="menu-column">
          <div class="standard-menu-container  menu-skin-main reveal-from-top">
            <a class="menu-bar menu-skin-main hidden-md hidden-lg" href="#">
              <span class="ham"></span>
            </a>

            <nav>
              <ul id="menu-main-nav-1" class="menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645">
                  <a href="http://www.estiponagroup.com/dev/">Home</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646">
                  <a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647">
                  <a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648">
                  <a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649">
                  <a href="http://www.estiponagroup.com/dev/our-story/">Our Story</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650">
                  <a href="http://www.estiponagroup.com/dev/news/">News</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651">
                  <a href="http://www.estiponagroup.com/dev/our-fans/">Our Fans</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652">
                  <a href="http://www.estiponagroup.com/dev/contact/">Contact Us</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>

      <div class="search-main-nav clear">
        <form action="http://www.estiponagroup.com/dev/" class="search-form" method="get" role="search">
          <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

          <label for="search_mobile_inp">
            <i class="fa fa-search"></i>
          </label>

          <!--<input type="submit" value="Go" class="search-submit">-->
        </form>
      </div>
    </div>
  </header>

  <div class="search-main-nav clear">
    <form action="http://www.estiponagroup.com/dev/" class="search-form" method="get" role="search">
      <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

      <label for="search_mobile_inp">
        <i class="fa fa-search"></i>
      </label>

      <!--<input type="submit" value="Go" class="search-submit">-->
    </form>
  </div>
</div>

Answer 1

问题是pointer-events: none;上的.main-header样式声明。

pointer-events：none;

元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

.main-header {
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
    z-index: 1000;
    pointer-events: none; /*  <-- remove this */
    /* ... */
}

或者在您的输入中添加pointer-events: all：

.search-main-nav input {
    border: 2px solid #333;
    color: #333;
    pointer-events: all; /* <-- add this */
    z-index: 999;
}

单击鼠标无法关注输入元素

1 个答案: