javascript - 如果单击消息框，防止鼠标离开元素淡入淡出

Question

我的网站有一个反馈按钮，当鼠标悬停在它上面时，文本框会展开，用户可以输入文本然后提交他们的反馈。

问题是鼠标淡出。当您将鼠标从该元素移开时，它会逐渐消失，即使用户在文本区域中单击以开始编写消息也是如此。我想大多数人在打字前都会移动鼠标，所以这很烦人。

有谁知道单击文本框时防止鼠标移开淡出的方法.. jQuery/js/css？下面是我现在使用的 jQuery、HTML 和 CSS:

$(window).load(function() {
  menuPosition = $('#fl_menu').position().top;
  FloatMenu();
  $fl_menu.hover(
    function() { //mouse over
      $fl_menu_label.fadeTo($menu_fade_speed, 1);
      $fl_menu_menu.fadeIn($menu_fade_speed);
    },
    function() { //mouse out
      $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
      $fl_menu_menu.fadeOut($menu_fade_speed);
    }
  );
});

body {
  margin: 0px;
  padding: 0px;
}
#fl_menu {
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 9999;
  width: 183px;
  height: 50px;
}
#fl_menu .label {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 50px;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  letter-spacing: 7px;
}
#fl_menu .menu {
  display: none;
}
#fl_menu .menu .menu_item {
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  color: #bbb;
  border-top: 1px solid #333;
  padding: 10px 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
}
#fl_menu .menu a.menu_item:hover {
  background: #333;
  color: #fff;
}
.menu-submit {
  display: inline-block;
  background: #808080;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
}
.message.menu-message {
  resize: vertical;
  max-height: 100px;
}
.menu-submit {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fl_menu">
  <div class="label menu_item">Feedback?</div>
  <div class="menu">
    <form id="feedback-form" class="comments-form contact-form menu_item" action="https://formspree.io/me@gmail.com" method="POST">
      <textarea class="message menu-message" type="text" name="comment" placeholder="Enter text.."></textarea>
      <input name="submit" type="submit" class="menu-submit" value="Submit" />
    </form>
  </div>
</div>

Answer 1

fiddle :https://jsfiddle.net/37htuwe6/1/

Java 脚本:

// Commonly used DOM variables
$wrapper = $("#fl_menu");
$textarea = $wrapper.find("textarea");
$form = $wrapper.find('.menu');


// Initalize hasClickedTextarea flag to false
var hasClickedTextarea = false;


// When the textarea is clicked tip the flag
$textarea.on('click', function()
{
  hasClickedTextarea = true;
});


// Default fade in and fade out speed to 500
var FADE_SPEED = 500;


// Mouse in and mouse out callback fn's
// Only fade out if the textarea has not been clicked
$wrapper.hover(
  function()
  {
    $form.fadeIn(FADE_SPEED);
  },
  function()
  {
    if(!hasClickedTextarea)
    {
      $form.fadeOut(FADE_SPEED);
    }
  }
);