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.

Vadim Ovchinnikov · Accepted Answer · 2017-08-07 07:54:21Z

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>

Vadim Ovchinnikov · Accepted Answer · 2017-08-07 07:55:22Z

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>

Collectives™ on Stack Overflow

jQuery - change text on button hover

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related