javascript - onmouseover & onmouseleave functions not working properly -

i'm new site , relatively new web development. trying incorporate javascript webpage made html & css. webpage online store products , trying when has mouse on 1 of products, provide details such name of product , price , when move mouse out, go image of product. reason, code, change elements shows details won't change original image after mouse moves away.

i've tried think of , goal of project make sure had understanding of javascript trying without jquery. advice appreciated.

here code:

        //holds div elements class attribute "productlink" hold product images         var products = document.getelementsbyclassname("productlink");          //when function called, product image changed show image of product, name , price         //classnum - specifc class element being called         //priceamount - price of product         //describe - description/name of product         function hoverdetails(classnum, priceamount, describe) {             //div container details, image of product, price of product , description             var divcontainer = document.createelement("div");             var image = document.createelement("img");             var price = document.createelement("p");             var description = document.createelement("p");              var pricetextnode = document.createtextnode(priceamount);             var descriptiontextnode = document.createtextnode(describe);              description.appendchild(descriptiontextnode);             price.appendchild(pricetextnode);             image.src = picarray[classnum];              divcontainer.setattribute("class", "newdiv");             image.setattribute("class", "newimg");             price.setattribute("class", "itemprice")             description.setattribute("class", "itemdescription");              products[classnum].parentnode.style.textdecoration = "none";              divcontainer.appendchild(image);             divcontainer.appendchild(description);             divcontainer.appendchild(price);              //this should replace current image details specified eariler             //childnode set 1 due #text node in div             products[classnum].replacechild(divcontainer, products[classnum].childnodes[1]);         }          //this function, when called, replaces detailed product image of product         function originalimage(classnum) {             var image = document.createelement("img");              image.setattribute("class", "display_image");             image.src = picarray[classnum];              products[classnum].replacechild(image, products[classnum].childnodes[1]);         } 

here element referencing these functions:

   <a href="#">    <div class="productlink" onmouseover="hoverdetails(0,'$85.95','printer') "onmouseout="originalimage(0)">    <img class="display_image" src="images/printer1.jpg" />    </div> 

don't mind variable names , i'm sorry if code seems much. appreciated.

edit: let people know, both functions work. onmouseleave event works when onmouseover event not attached. additionally, code works when onmouseover event replaced onclick. when replace onmouseover onmouseenter, code works once never again. strange.

there mouse event called onmouseout. add attribute called onmouseout="removehoverdetails()" , inside of removehoverdetails() select , .visibility = "hidden"; or whatever way want use rid of elements in popup. check out w3schools tutorial on onmouseover , onmouseout: http://www.w3schools.com/jsref/event_onmouseover.asp