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中使用jQuery javascript，但如果有人向我展示一个更好的解决javascript mouseout / mouseover范例的方法，我也不会介意。

Answer 1

<强> Fiddle Demo

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

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

Answer 2

document.getElementById("result-content")[0].innerHTML = document.getElementById("result-content").innerHTML;无处可带。你必须在某处保留价值。

如果你喜欢有点不同的方法，那就试试吧。

document.querySelector("#product-name").addEventListener("mouseover", function(){
    var txt = document.querySelector("#result-content").innerHTML;
    document.querySelector("#result-content").innerHTML = document.querySelector(".hidden").innerHTML;

    this.addEventListener("mouseout", function(){
        document.querySelector("#result-content").innerHTML = txt;
    });
});

<强> jsfiddle Demo

大多数浏览器都支持

document.querySelector。 http://caniuse.com/queryselector

Answer 3

我认为，在这种情况下必须保存以前的状态，例如：

var object = document.getElementById("product-name"),
    previous_state = document.getElementById("result-content").innerHTML;

可能不是最好的方法，但如果代码没有重大更改，应该如下所示： jsfiddle

Answer 4

试试这个用于鼠标输出

object.onmouseout=function(){
    document.getElementById("result-content").innerHTML ='Lorem ipsum dolor sit amet.';
};

onmouseout事件无法触发并更改值

4 个答案: