javascript - onmouseout 事件未能触发并更改值

Question

我有一个悬停元素，当用户将鼠标悬停在它上面时，将从隐藏元​​素中获取文本，当它悬停时，它将重新分配其先前的值。

我的 html 有点像这样。

<div id="product-name">Hover Here</div>
<br>
<div id="result-content">Lorem ipsum dolor sit amet.</div>


<div class="hidden">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque mi leo, ut cursus tellus tempor nec. Sed facilisis augue neque, a ornare urna ornare in. Etiam consequat, dui sit amet pretium bibendum, ante ipsum ullamcorper libero, vel tempus erat urna sed purus. Quisque id ultricies elit, non posuere nunc. Etiam pulvinar magna tortor, at aliquet turpis interdum et. Duis imperdiet enim ante, sit amet pretium enim aliquet venenatis. Donec ac nibh nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi aliquam est adipiscing volutpat pulvinar. Curabitur leo augue, iaculis id lacus sed, dictum vestibulum nulla. Etiam sit amet tempus felis, ac aliquet erat. Nunc ullamcorper consequat mattis. In molestie, tortor ac venenatis dapibus, eros neque vulputate nulla, in tristique ante diam non turpis. Maecenas mattis in risus eu ornare. Cras a rutrum nulla. Proin sagittis justo vehicula augue porttitor vulputate.
</div>

JavaScript 是这样的:

var object = document.getElementById("product-name");
object.onmouseover=function(){
    document.getElementById("result-content").innerHTML = document.getElementsByClassName("hidden")[0].innerHTML;
};

object.onmouseout=function(){
    document.getElementById("result-content")[0].innerHTML = document.getElementById("result-content").innerHTML;
};

jsfiddle.net

但是我的 mouseout 事件在这里失败了。谁能帮我解决这个问题。我不能在这个仅 dom 的 javascript 中使用 jQuery，但我不介意是否有人向我展示一种更好的方法来解决 javascript mouseout/mouseover 范例。

Answer 1

<强> Fiddle Demo

您需要存储 block 的初始内容。

var object = document.getElementById("product-name");
var currentHtml = document.getElementById("result-content").innerHTML;
object.onmouseover=function(){
     document.getElementById("result-content").innerHTML = document.getElementsByClassName("hidden")[0].innerHTML;

     this.onmouseout=function(){
        document.getElementById("result-content").innerHTML = currentHtml;
     }
};