Question

我是这个网站的新手，对网络开发来说相对较新。我试图将javascript合并到我用HTML＆amp; amp; CSS。这个网页基本上是某些产品的在线商店，我试图做的是当有人将鼠标放在其中一个产品上时，它会提供一些细节，例如产品名称和价格以及何时移动鼠标移出，它会回到产品的图像。出于某种原因，使用我的代码，它将更改元素以便显示细节，但在鼠标移开后它不会更改回原始图像。

我已经尝试了我能想到的一切，这个项目的目标是确保我对javascript有所了解所以我试图在没有任何jquery的情况下这样做。任何建议都将不胜感激。

以下是代码：

        //Holds all div elements with class attribute "productlink" which hold the product images
        var products = document.getElementsByClassName("productlink");

        //When this function is called, the product image is changed to show an image of the product, the name and price
        //classNum - specifc class element being called
        //priceAmount - price of product
        //describe - Description/Name of the product
        function hoverDetails(classNum, priceAmount, describe) {
            //Div container for details, image of product, price of product and 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 the current image with the details specified eariler
            //childNode is set to 1 due to a #text node in the div
            products[classNum].replaceChild(divContainer, products[classNum].childNodes[1]);
        }

        //This function, when called, replaces the detailed product with just an image of the 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]);
        }

以下是引用这些功能的元素：

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

请注意变量名称，如果我的代码看起来太多，我很抱歉。任何帮助将不胜感激。

编辑：只是为了让人们知道，这两个功能都有效。 onmouseleave事件在未附加onmouseover事件时有效。此外，当onmouseover事件被onclick替换时，代码可以工作。当我用onmouseenter替换onmouseover时，代码只运行一次，但从不再运行。这很奇怪。

Answer 1

实际上有一个名为onmouseout的鼠标事件。添加另一个名为onmouseout="removeHoverDetails()"的属性，然后在removeHoverDetails（）内部选择所有内容并说出.visibility =＆＃34; hidden＆＃34 ;;或者你想用什么方式来摆脱弹出窗口中的元素。另请查看关于onmouseover和onmouseout的w3schools教程：http://www.w3schools.com/jsref/event_onmouseover.asp

Answer 2

好的，我找到了解决问题的方法。我将onmouseover事件放在“productlink”div的image元素上，并在div上留下onmouseout事件，看起来工作正常。

onmouseover＆amp; onmouseleave功能无法正常工作

2 个答案: