jQueryの - ボタンの変更テキストが

Question

を置くこのフィドルをご覧ください。mouseenter()オン

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>

を、FAアイコン（fa fa-envelope-o）が隠されるべきであり、 "私にお問い合わせください"表示する必要があります。正常に動作しています。

mouseleave()には、FAアイコンが表示され、[私に連絡する]を非表示にする必要があります。しかし、フォーカスがボタンから削除されてもFAアイコンは表示されません。

私を助けてください。ありがとう。あなたはそれを取り戻すことができないmouseoverにそうtext()を使用してテキスト"Contact Me"でmouseenterに<div>内部のすべてを交換するため

Answer 1

これが起こっています。 div内に新しいスパンを追加し、div内のすべてのものを置き換えるのではなく、新しいテキストを追加してください。あなたはこのような何か行うことができます：あなたは$("#itext")を変更する必要はありませんが、あなたは#contactButtonのテキストを変更し、それが元のコンテンツだと、それをバックに設定する必要があります

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

を - アイコン：

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