jQuery - change text on button hover

Question

Please see this fiddle:

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

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

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

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

On mouseenter(), the FA icon (fa fa-envelope-o) should be hidden and "Contact Me" should be displayed. It is working correctly.

On mouseleave(), the FA icon should be displayed and "Contact Me" should be hidden. But the FA icon is hidden even after the focus is removed from the button.

Please help me out. Thanks.

Answer 1

this is happening because you are replacing everything inside <div> on mouseenter with text "Contact Me" by using text() so on mouseover you can't get it back. Add a new span inside your div and add new text to it rather than replacing everything inside your div. You can do something like this:

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

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

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

Answer 2

You don't need to change the $("#itext"), but you do need to change the text of the #contactButton and set it back to it's original content - the icon:

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

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

<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"><i class="fa fa-envelope-o" id="itext"></i></div>
</div>