JQuery изменить текст при наведении мыши и вернуться к оригиналу при наведении мыши

Question

У меня есть этот код, он работает при наведении курсора, но когда указатель мыши отключен от элемента 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>

Может кто-нибудь помочь, пожалуйста?

Answer 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>