Question

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

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

如果单击文本框，任何人都知道防止鼠标消失的方法.. jQuery / js / css？下面是jQuery，HTML＆amp;我现在正在使用的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

小提琴：https://jsfiddle.net/37htuwe6/1/

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

Answer 2

最终结果：

HTML：

<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>

css：

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

JS

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

如果单击消息框，则防止鼠标关闭元素淡出

2 个答案: