jQuery的 - 按钮改变文字悬停

Question

请参阅此琴：

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>

在mouseenter()，英足总图标（fa fa-envelope-o）应该被隐藏， “联系我”应该显示。它工作正常。

在mouseleave()上，应该显示FA图标，并且应该隐藏“与我联系”。但即使焦点从按钮上移除，FA图标也会隐藏。

请帮我一把。谢谢。

Answer 1

这种情况正在发生，因为你是内<div>上mouseenter文本"Contact Me"使用text()等mouseover你不能拿回来取代一切。在div内添加一个新跨度，并添加新文本，而不是替换div中的所有内容。你可以做这样的事情：

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

你并不需要更改$("#itext")，但你确实需要改变#contactButton的文本，并将其设置回它的原始内容 - 图标：

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