Javascript 如果单击消息框，则防止鼠标离开元素褪色

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

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

如果单击文本框，任何人都知道防止鼠标消失的方法。。jQuery/js/css？下面是我现在使用的jQuery、HTML和CSS：

$（窗口）.load（函数（）{
menuPosition=$（“#fl_菜单”）.position（）.top；
浮动菜单（）；
$fl_菜单。悬停(
函数（）{//将鼠标移到
$fl\U menu\U label.fadeTo（$menu\U fade\U speed，1）；
$fl\U menu\U menu.fadeIn（$menu\U fade\U speed）；
},
函数（）{//鼠标悬停
$fl\u menu\u label.fadeTo（$menu\u fade\u speed，$closed\u menu\u opacity）；
$fl\U menu\U menu.fadeOut（$menu\U fade\U speed）；
}
);
});
正文{
边际：0px；
填充：0px；
}
#FLU菜单{
位置：绝对位置；
顶部：50px；
左：0px；
z指数：9999；
宽度：183px；
高度：50px；
}
#fl_菜单标签{
左侧填充：20px；
右边填充：20px；
线高：50px；
字体系列：“Arial黑色”，Arial，Helvetica，无衬线；
字体大小：14px；
字体大小：粗体；
背景：rgba（0,0,0,0.6）；
颜色：#fff；
字母间距：7px；
}
#菜单，菜单{
显示：无；
}
#fl_菜单。菜单。菜单项{
显示：内联块；
背景：rgba（0,0,0,0.5）；
颜色：#bbb；
边框顶部：1px实心#333；
填充：10px 20px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
文字装饰：无；
}
#fl_菜单。菜单a。菜单项：悬停{
背景：#333；
颜色：#fff；
}
.菜单提交{
显示：内联块；
背景#8080；
颜色：#bbb；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
文字装饰：无；
}
.message.menu-message{
调整大小：垂直；
最大高度：100px；
}
.菜单提交{
浮动：对；
}

反馈
小提琴：

Javasript：

// 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);
    }
  }
);

最终结果：

HTML:

js

//常用的DOM变量
$wrapper=$（“#fl#U菜单”）；
$textarea=$wrapper.find（“textarea”）；
$form=$wrapper.find（'.menu'）；
$fl_menu_menu=$（“#fl_menu.menu”）；
//初始化hasClicked标志为false
var hasClickedTextarea=false；
//单击文本区域时，提示标志
$textarea.on（'click'，function（））
{
hasClickedTextarea=true；
});
//默认淡入淡出速度为500
var FADE_速度=100；
//鼠标输入和鼠标输出回调fn
//仅在未单击文本区域时淡出
$wrapper.hover(
函数（）
{
$form.fadeIn（衰减速度）；
},
函数（）
{
如果（！hasClickedTextarea）
{
$form.fadeOut（衰减速度）；
}
}
);
$（文档）.bind（'click'，函数（e）{
如果（！$（e.target）.is（'.feedback menu'））{
hasClickedTextarea=false；
$form.fadeOut（衰减速度）；
}
});
//配置浮点选项
$float_速度=1500//毫秒
$float_easing=“easeOutQuint”；
//缓存变量
$fl#U菜单=$（“#fl#U菜单”）；
$fl_menu_menu=$（“#fl_menu.menu”）；
$fl#u menu_label=$（“#fl#u menu.label”）；
$（窗口）。加载（函数（）{
menuPosition=$（“#fl_菜单”）.position（）.top；
浮动菜单（）；
$fl_菜单。悬停(
函数（）{//将鼠标移到
$fl\U menu\U label.fadeTo（$menu\U fade\U speed，1）；
$fl\U menu\U menu.fadeIn（$menu\U fade\U speed）；
},
函数（）{//鼠标悬停
$fl\u menu\u label.fadeTo（$menu\u fade\u speed，$closed\u menu\u opacity）；
$fl\U menu\U menu.fadeOut（$menu\U fade\U speed）；
}
);
});
$（窗口）。滚动（函数（）{
浮动菜单（）；
});
函数浮动菜单（）{
var scrollAmount=$（document.scrollTop（）；
var newPosition=菜单位置+滚动量；
如果（$（窗口）.height（）@丹尼，你能把它扔进小提琴里吗？是的，但是出于某种原因，jfiddle无法解释jQuery，也许是我把它设置错了？不管怎样，这是我网站上的确切编码，我修改电子邮件的原因很明显，哈哈。@Danny终于把小提琴弄好了，我马上就给你拿点东西！你就是那个人，谢谢！我也一直在努力，试图把它弄好如果（！点击）以某种方式工作：）@Danny更新了w/Fiddle！
<div id="fl_menu">
    <div class="label menu_item">Feedback?</div>
    <div class="menu feedback-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 feedback-menu" type="text" name="comment" placeholder="Enter feedback.."></textarea>
    <img id="FeedbackClose" src="./img/close.png" />
        <button id="submit" name="submit" type="submit" style="border: 0; background: transparent; margin-right: -12px; margin-top: -2px;" class="menu-submit feedback-menu"><img src="./img/blue-submit-button.png" width="100" height="auto" alt="submit" /></button>
    </form>
    </div>
</div>

body{margin:0px; padding:0px;}
#fl_menu{position:absolute; top:40px; left:0px; z-index:9999; width:183px; height:50px;}
#fl_menu .label{padding-left:19px; padding-right: 19px; line-height:50px; font-family:"Verdana", 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; }
#FeedbackClose { float: left; width: 22px; height: 22px; margin-top: 5px; position: relative; }
#FeedbackClose:hover { transform: scale(1.1); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;-webkit-transition: width 2s;}
#submit:hover { transform: scale(1.05); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;-webkit-transition: width 2s;}
#submit { outline: none;  -moz-outline-style: none; }

// Commonly used DOM variables
$wrapper = $("#fl_menu");
$textarea = $wrapper.find("textarea");
$form = $wrapper.find('.menu');
$fl_menu_menu=$("#fl_menu .menu");
// Initalize hasClicked 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 = 100;


// 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);
    }
  }
);
$(document).bind('click', function(e) {
    if(!$(e.target).is('.feedback-menu')) {
    hasClickedTextarea = false; 
    $form.fadeOut(FADE_SPEED);
  }
});

//config Float options
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";

//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(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);
        }
    );
});

$(window).scroll(function () {
    FloatMenu();
});

function FloatMenu(){
    var scrollAmount=$(document).scrollTop();
    var newPosition=menuPosition+scrollAmount;
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
        $fl_menu.css("top",menuPosition);
    } else {
        $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
    }
}