jQuery在鼠标悬停时更改文本,在鼠标悬停时返回原始文本

时间:2018-10-02 04:22:15

标签: jquery mouseevent mouseover mouseout

我有这段代码,它可以在鼠标悬停时使用,但是在 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>

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

原因是,当您使用$("div#brieftext").text($(this).data("text"))设置brieftext的文本时,您已经清除了其原始内容,因此,如果要再次显示原始内容,则需要调用{{ 1}}进行手动设置

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
});