JQuery 在鼠标悬停时更改文本并在鼠标悬停时返回原始文本

【问题标题】：JQuery change text on mouse over and return to original on mouseoutJQuery 在鼠标悬停时更改文本并在鼠标悬停时返回原始文本
【发布时间】：2019-03-07 04:56:12
【问题描述】：

我有这段代码，它适用于鼠标悬停，但是当 mouse out 离开 a 元素时，它不会在 p 中显示原始文本

$("a.brieflink").bind("mouseover", function() {
    $("div#brieftext").text($(this).data("text"));
});
$("a.brieflink").bind("mouseout", function() {
    $("brieftext").hide($(this).data("text"));
});

<a href="1.html" class="brieflink" data-src="article.jpg" data-text="text1">Brief 1</a>
<a href="2.html" class="brieflink" data-src="article.jpg" data-text="text2">Brief 2</a>
<a href="3.html" class="brieflink" data-src="article.jpg" data-text="text3">Brief 3</a>

<div id="brieftext"><p>Original text</p></div>

有人可以帮忙吗？

【问题讨论】：

标签： jquery mouseevent mouseover mouseout

【解决方案1】：

原因是当你使用$("div#brieftext").text($(this).data("text"))设置brieftext的文字时，已经清除了原来的内容，所以如果要再次显示原来的内容，需要调用html()来设置手动

$("a.brieflink").bind("mouseover", function() {
    $("#brieftext").text($(this).data("text"));
});
$("a.brieflink").bind("mouseout", function() {
    $("#brieftext").html("<p>Original text</p>");//set the content manaully
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="1.html" class="brieflink" data-src="article.jpg" data-text="text1">Brief 1</a>
<a href="2.html" class="brieflink" data-src="article.jpg" data-text="text2">Brief 2</a>
<a href="3.html" class="brieflink" data-src="article.jpg" data-text="text3">Brief 3</a>

<div id="brieftext"><p>Original text</p></div>

【讨论】：

感谢您的帮助！