JQuery - change text on mouseover
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>
The mouseenter()
FA icon ( fa fa-envelope-o
) should be hidden and the message "Contact me" will appear on the screen. It works correctly.
Incl. mouseleave()
the FA icon should be displayed and "Contact Me" should be hidden. But the FA icon is hidden even after removing the focus from the button.
Please help me. Thank.
source to share
This is because you are replacing everything inside <div>
with mouseenter
text "Contact Me"
, using text()
and so on mouseover
, you cannot return it. Add a new range inside div
and add new text to it, not replace everything inside 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>
source to share
You don't need to change $("#itext")
, but you do need to change the text #contactButton
and set it back to its original content - 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>
source to share