CODEWITHSUNDEEP
javascripthtml
user3736019
user3736019

Reputation: 1

onmouseout event failed to fire and change value

I have a hover element in which when user hover over it will get text from a hidden element and when it hovers out it will reassign in its previous value.

My html is sort of like this.

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

and javascript is this:

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

But my mouseout event failed me here. Can anyone help me out here how can i resolve this. I can't use jQuery in this dom only javascript, but I wouldn't mind if anybody show me a better approach to resolve javascript mouseout/mouseover paradigm.

Upvotes: 0

Views: 105

Answers (4)

Md Nazmoon Noor
Md Nazmoon Noor

Reputation: 3307

document.getElementById("result-content")[0].innerHTML = document.getElementById("result-content").innerHTML; will take you nowhere. You have to preserve the value somewhere.

If you fancy a bit different approach then try this.

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 is supported in most browser. http://caniuse.com/queryselector

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20626

Fiddle Demo

You need to store initial contents of the 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;
     }
};

Upvotes: 2

Jitendra Yadav
Jitendra Yadav

Reputation: 896

try this one for mouse out 

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

Upvotes: 0

javakorr
javakorr

Reputation: 76

I think, in this case must save somewhere previous state, like:

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

Might not be the best approach, but without major changes in code should look like this: jsfiddle

Upvotes: 1

Related Questions