如何保持CSS悬停和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");
    });
  });
}