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>