如何保持 CSS Hover 和 jQuery 文本/输入和容器打开？

问题描述

我构建了一个搜索框，它的运行方式几乎完全符合我的要求，除了一个小问题，只有部分解决方案有效。我已经在“SO”上尝试了一些答案，甚至从这里得到了一些想法将它们放在一起，我非常感激，但我现在真的坚持下去了。

整个事情在 CSS 悬停后从一个字体真棒图标打开，这包括它所在的“框”和输入。我有一些 jQuery 来保持框打开，直到用户点击它，但是如果鼠标被移动，即悬停被带走，那么文本/输入就会消失（框保持打开状态）。我希望整个搜索框在悬停后保持打开状态，包括文本，以便它保持可见，即使用户将鼠标移开，然后在单击时全部关闭（或者当然，如果输入了搜索，但这是另一回事）我已经走了这么远，我知道我一定遗漏了一些相对较小的东西，所以感谢您的帮助！此外，如果任何代码出现严重错误或可以改进，我将非常感谢任何输入！

div.search-Box:hover > input.search-txt - 这似乎是让我大吃一惊的 CSS 的主要部分。我试过移动悬停等，但 > 似乎并没有像我想象的那样工作。我尝试为“文本输入”添加或编写新的 jQuery，类似于保持“框”打开，但是这个 CSS 选择器似乎覆盖了它或其他东西。我什至尝试通过 jQuery 自己添加一个类，但它又遇到了同样的问题。如果我不使用这个选择器，那么我或多或少会回到原点。

我在下面添加了基本代码并制作了一个 jsfiddle。 https://jsfiddle.net/g7vkc3x1/15/#&togetherjs=oRMrQkQlLD

HTML：

<div class="search-head">
                <div class="search-Box">
                    <input class="search-txt" type="text" name="" placeholder="Type to search...">
                        <a class="search-btn" href="#">
                            <i class="fas fa-search"></i>
                        </a>
                </div>
            </div>

CSS:
.search-head {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search-Box {
  position: absolute;
  height: 34px;
  min-width: 2.73%;
  transition: width 1s;
  border-radius: 80px;
  padding: 0.3em;
  margin-top: 10px;
  background: rgb(161,161,161);
}

div.search-Box:hover,.perm-hover {
  width: 60%;
  background-color: white;
}

div.search-Box:hover > input.search-txt { 
  width: 75%;
  padding: 0 6px;
  margin-left: 1.5em;
}

.search-btn {
  color: var(--clr-primary-1);
  float: right;
  width: 3.8em;
  height: 3.7em;
  border-radius: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.search-btn > i {
  font-size: 2em;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: rgb(0,112,177) !important;
  font-size: 2em;
  line-height: 2em;
  width: 0;
  font-weight: bold;
}

jQuery：

{
  $(".search-Box").click(function () {
    $(".search-Box").addClass("perm-hover");
  });

  $(".search-Box").click(function (e) {
    e.stopPropagation();
  });

  $(function () {
    $(document).click(function () {
      $(".search-Box").removeClass("perm-hover");
    });
  });
}

解决方法

我发现了您的错误，将鼠标移开后，您的输入再次隐藏。在这个代码

div.search-box:hover > input.search-txt {
  width: 75%;
  padding: 0 6px;
  margin-left: 1.5em;
}

您应该将其更改为：

div.search-box:hover > input.search-txt,div.search-box.perm-hover > input.search-txt {
  width: 75%;
  padding: 0 6px;
  margin-left: 1.5em;
}

因此，当搜索框（父）获取 perm-hover 的类时，它应该将 css 扩展为悬停在其内部的输入上。

html jquery