Javascript jQuery-在按钮悬停时更改文本

请看这把小提琴：

$（文档）.ready（函数（）{
$（“#contactButton”）.mouseenter（函数（）{
var txt=函数（）{
$（“#itext”）.text（“”）；
$（“#contactButton”）.text（“联系我”）；
};
设置超时（txt，500）；
});
$（“#contactButton”）.mouseleave（函数（）{
var shw=函数（）{
$（“#itext”）.text（“fa-信封-o”）；
$（“#contactButton”）.text（“”）；
};
设置超时（shw，500）；
});
});
。按钮{
框大小：内容框；
光标：指针；
填料：1米1.25米；
边框：2倍纯红；
文本对齐：居中；
边界半径：100%；
字号：2em；
字体大小：300；
颜色：红色；
文本溢出：隐藏；
保证金：3em 2em 0.75em 2em；
背景：无；
宽度：1米；
高度：自动；
过渡：所有1000ms三次贝塞尔（0.42,0,0.58,1）；
}
.按钮：悬停{
边框：2倍纯红；
边界半径：5px；
背景：红色；
颜色：白色；
宽度：35%；
}
之所以发生这种情况，是因为您正在使用
text（）
将
鼠标上的
内的所有内容替换为文本
“与我联系”
，所以
鼠标上方的
无法取回。在
div
中添加新span，并向其中添加新文本，而不是替换
div
中的所有内容。您可以这样做：


$（文档）.ready（函数（）{
$（“#contactButton”）.mouseenter（函数（）{
var txt=函数（）{
$（“#itext”）.hide（）；
$（“#contactButton”）.find（'span'）.text（“联系我”）；
};
设置超时（txt，500）；
});
$（“#contactButton”）.mouseleave（函数（）{
var shw=函数（）{
$（“#itext”）.show（）；
$（“#contactButton”）.find（'span'）.text（“”）；
};
设置超时（shw，500）；
});
});
。按钮{
框大小：内容框；
光标：指针；
填料：1米1.25米；
边框：2倍纯红；
文本对齐：居中；
边界半径：100%；
字号：2em；
字体大小：300；
颜色：红色；
文本溢出：隐藏；
保证金：3em 2em 0.75em 2em；
背景：无；
宽度：1米；
高度：自动；
过渡：所有1000ms三次贝塞尔（0.42,0,0.58,1）；
}
.按钮：悬停{
边框：2倍纯红；
边界半径：5px；
背景：红色；
颜色：白色；
宽度：35%；
}
您不需要更改
$（“#itext”）
，但您需要更改
#contactButton
的文本并将其设置回原始内容-图标：


$（文档）.ready（函数（）{
$（“#contactButton”）.mouseenter（函数（）{
var txt=函数（）{
$（“#contactButton”）.text（“联系我”）；
};
设置超时（txt，500）；
});
$（“#contactButton”）.mouseleave（函数（）{
var shw=函数（）{
$（“#contactButton”）.html（“”）；
};
设置超时（shw，500）；
});
});
。按钮{
框大小：内容框；
光标：指针；
填料：1米1.25米；
边框：2倍纯红；
文本对齐：居中；
边界半径：100%；
字号：2em；
字体大小：300；
颜色：红色；
文本溢出：隐藏；
保证金：3em 2em 0.75em 2em；
背景：无；
宽度：1米；
高度：自动；
过渡：所有1000ms三次贝塞尔（0.42,0,0.58,1）；
}
.按钮：悬停{
边框：2倍纯红；
边界半径：5px；
背景：红色；
颜色：白色；
宽度：35%；
}