jQuery - 更改按钮悬停时的文本

Question

请看这个小提琴：

https://jsfiddle.net/digitalrevenge/tguhkzxf/

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#contactButton").mouseenter(function() {
    var txt = function() {
      $("#itext").text("");
      $("#contactButton").text("Contact Me");
    };

    setTimeout(txt, 500);
  });

  $("#contactButton").mouseleave(function() {
    var shw = function() {
      $("#itext").text("fa fa-envelope-o");
      $("#contactButton").text("");
    };
    setTimeout(shw, 500);
  });
});

＆＃13;

.button {
  box-sizing: content-box;
  cursor: pointer;
  padding: 1em 1.25em;
  border: 2px solid red;
  text-align: center;
  border-radius: 100%;
  font-size: 2em;
  font-weight: 300;
  color: red;
  text-overflow: hidden;
  margin: 3em 2em 0.75em 2em;
  background: none;
  width: 1em;
  height: auto;
  transition: all 1000ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  border: 2px solid red;
  border-radius: 5px;
  background: red;
  color: white;
  width: 35%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="contactMe">
  <div class="button" type="button" name="getToKnowMe" id="contactButton"><i class="fa fa-envelope-o" id="itext"></i></div>
</div>

＆＃13;

＆＃13;

＆＃13;

在mouseenter()上，应隐藏FA图标（fa fa-envelope-o）并且＆＃34;与我联系＆＃34;应该显示。它工作正常。

在mouseleave()上，应显示FA图标并且＆＃34;与我联系＆＃34;应该隐藏起来。但即使从按钮上移除焦点，FA图标也会隐藏。

请帮帮我。感谢。

Answer 1

这种情况正在发生，因为您正在使用<div>替换mouseenter上"Contact Me"内的所有内容text()，因此mouseover您无法使用div拿回来。在div中添加新范围并向其添加新文字，而不是替换$(document).ready(function() { $("#contactButton").mouseenter(function() { var txt = function() { $("#itext").hide(); $("#contactButton").find('span').text("Contact Me"); }; setTimeout(txt, 500); }); $("#contactButton").mouseleave(function() { var shw = function() { $("#itext").show(); $("#contactButton").find('span').text(""); }; setTimeout(shw, 500); }); });内的所有内容。你可以这样做：

＆＃13;

＆＃13;

.button {
  box-sizing: content-box;
  cursor: pointer;
  padding: 1em 1.25em;
  border: 2px solid red;
  text-align: center;
  border-radius: 100%;
  font-size: 2em;
  font-weight: 300;
  color: red;
  text-overflow: hidden;
  margin: 3em 2em 0.75em 2em;
  background: none;
  width: 1em;
  height: auto;
  transition: all 1000ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  border: 2px solid red;
  border-radius: 5px;
  background: red;
  color: white;
  width: 35%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contactMe">
  <div class="button" type="button" name="getToKnowMe" id="contactButton"><span></span><i class="fa fa-envelope-o" id="itext"></i></div>
</div>

＆＃13;

String input = "2.1(-7-11.3)-12.1*-2.3-.11";
input = input.replaceAll("([\\d.])-([\\d.])", "$1&$2");

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不需要更改"#{Rails.root}/bin/java" ，但您需要更改$("#itext")的文字并将其重新设置为原始内容 - 图标：

＆＃13;

＆＃13;

#contactButton

＆＃13;

$(document).ready(function() {
  $("#contactButton").mouseenter(function() {
    var txt = function() {
      $("#contactButton").text("Contact Me");
    };

    setTimeout(txt, 500);
  });

  $("#contactButton").mouseleave(function() {
    var shw = function() {
      $("#contactButton").html('<i class="fa fa-envelope-o" id="itext"></i>');
    };
    setTimeout(shw, 500);
  });
});

＆＃13;

.button {
  box-sizing: content-box;
  cursor: pointer;
  padding: 1em 1.25em;
  border: 2px solid red;
  text-align: center;
  border-radius: 100%;
  font-size: 2em;
  font-weight: 300;
  color: red;
  text-overflow: hidden;
  margin: 3em 2em 0.75em 2em;
  background: none;
  width: 1em;
  height: auto;
  transition: all 1000ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  border: 2px solid red;
  border-radius: 5px;
  background: red;
  color: white;
  width: 35%;
}

＆＃13;

＆＃13;

＆＃13;