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.
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.