javascript - 仅当鼠标放在按钮上时显示 div

Question

我想要一个带有文本的 div，仅当鼠标指针置于特定按钮上时才显示。

这是我的代码:

// Help-text
    $("#help-container")
    .mouseover(function(e) {
        $(this).find("#help-text").fadeIn(100).width("80%");
    })
    .mouseleave(function(e) {
        $(this).find("#help-text").fadeOut(100).width("0%");
    });

#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
}
#help-container #help-text {
    width: 0;
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  </div>

显示部分工作正常。但是当我离开按钮/容器时，文本应该消失。相反，它会触发平安夜效应。

我的代码中的基本逻辑有什么问题？

编辑: Stackoverflow 上有很多答案可以实现这一点。但我实际上很好奇为什么我的特定逻辑不起作用。

Answer 1

您不需要 javascript 来在悬停时显示和隐藏 div。您可以使用纯 CSS 来完成，速度要快得多。

我添加了以下 CSS，用于在另一个 div 悬停时显示和隐藏 div:

#help-container #help-btn:hover ~ #help-text{
  display: block;
}

请参阅下面的代码片段:

#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
#help-container #help-text-container {
    width: 0%;
    display: none;
    overflow: hidden;
    height:75px;
}

#help-container #help-btn:hover ~ #help-text-container{
  display: block;
  animation:widthanim 0.5s normal linear forwards;
}

@keyframes widthanim {
   from { width: 0% }
   to { width: 80%;  }
}

<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text-container"><div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div></div>
  </div>