将使用中的函数绑定到表单字段

Question

我有一个表单，在表单字段的末尾带有一个信息按钮。

当鼠标悬停在示例框上时，它会向下滑动。当鼠标悬停在正确的表单字段上时，我想添加使框保持可见的功能。

在第一个方法被调用时，我试图将带有“ id”的“ example-hover”类添加到表单字段中，但这并没有阻止它向上滑动。

function showExample(id) {
  $("#deal-example-" + id).slideDown(300, function() {
    $(".form-info-panel > li").animate({
      opacity: 1
    }, 200)
  })
}

function hideExample(id) {
  $(".form-info-panel > li").animate({
    opacity: 0
  }, 200, function() {
    $("#deal-example-" + id).slideUp(300);
  })
}


$(".example-hover").hover(function() {
  showExample(this.id)
}, function() {
  hideExample(this.id)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-11 offset-1 mt-2">
    <div class="field-title">
      <strong>Title</strong>
    </div>
    <div class="row">
      <div class="col-11">
        <input id="deal_title" autofocus class="form-control" placeholder="Buy one get one free" required autocomplete=off) />
      </div>
      <div class="col-1 form-info-icon text-center example-hover" id="1">
        <i class="fas fa-info"></i>
      </div>
    </div>
    <div class="field-small-print" id="deal-val-1">
      <small>Must be present, Must be between 20 - 50 characters</small>
    </div>
  </div>
</div>
<!-- Examples for titles -->
<div class="row example" id="deal-example-1">
  <div class="col-11 offset-1">
    <div class="row">
      <div class="col-12">
        <small><strong class="field-title">Examples</strong></small>
      </div>
    </div>
    <div class="row">
      <div class="col-11">
        <ul class="form-info-panel">
          <li>Buy one get one free on selected items</li>
          <li>Percentage off of items</li>
          <li>Rs off of selected items</li>
          <li>Free item when you buy selected item</li>
          <li>Half price on selected items</li>
        </ul>
      </div>
    </div>
  </div>
</div>