鼠标悬停时如何使用DOM更改可见性CSS属性

Question

我从js创建了一个<img/>元素，我希望它仅在鼠标悬停时出现
回调函数makesVisible()实际上已被调用，但没有任何变化。

我想将可见性从hidden更改为visible

var imgHover = document.createElement('img');
        imgHover.setAttribute("src", "img/icona_play.jpg");
        imgHover.style.width = "30px";
        imgHover.style.height = "23px";
        imgHover.style.position = "absolute";
        imgHover.style.margin = "0 auto";
        imgHover.style.left = "45px";
        imgHover.style.bottom = "35px";
        //I want to change this following property
        imgHover.style.visibility = "hidden";
        imgContainer.appendChild(imgHover);

        //Calling the function when mouseover
        imgContainer.addEventListener("mouseover", makeVisible, false);


        function makeVisible()
        {
            imgHover.style.visibility = "visible";
        }

Answer 1

您可以选择使用不透明度属性。 初始设置如下： imgHover.style.opacity = 0; 比在makeVisible方法中将其更改为imgHover.style.opacity = 1;

解决此问题的另一种方法是在容器div上设置addEventListener方法。 假设您可以在图像周围有一个与图像尺寸完全相同的容器。

例如：

imgContainer.addEventListener("mouseover", makeVisible, false);

问题是不透明度和可见性在不破坏元素应占用的空间的意义上具有相同的作用。 尽管该隐藏元素将忽略鼠标/指针事件，但有什么不同。

Answer 2

您的代码可以正常工作，前提是您设置了对imgContainer的有效引用，并且为动态创建的元素设置了图像的有效路径：

 var imgContainer = document.getElementById("container"); var imgHover = document.createElement('img'); imgHover.setAttribute("src", "https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png"); imgHover.style.width = "30px"; imgHover.style.height = "23px"; imgHover.style.position = "absolute"; imgHover.style.margin = "0 auto"; imgHover.style.left = "45px"; imgHover.style.bottom = "35px"; imgHover.style.visibility = "hidden"; imgContainer.appendChild(imgHover); imgContainer.addEventListener("mouseover", makeVisible, false); function makeVisible(){ imgHover.style.visibility = "visible"; } 

 <div id="container">Hover Over Me</div> 

话虽如此，您应该避免在元素上设置内联样式，因为在需要时很难覆盖它们，并且它们经常会导致代码重复。 提前设置CSS类，然后根据需要使用element.classList API来应用/删除这些类要简单得多。

另外， visibility确实会影响您是否看到某个元素，但是即使您看不到该元素，UI也会为其分配空间，这并不总是可取的。 在大多数情况下，使用display:none隐藏元素，然后简单地删除该指令以显示该元素是更好的方法。

最后，虽然使用setAttribute()当然是有效的，但是您也可以通过元素的直接属性来配置它们。 几乎所有HTML属性都映射到相应的JavaScript对象属性。 使用这些可以使代码更简单。

看一个将所有这些放在一起的示例：

 var imgContainer = document.getElementById("container"); var imgHover = document.createElement('img'); // Just set properties of the element directly: imgHover.src ="https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png"; // Just add pre-made classes to style the element imgHover.classList.add("hoverImg"); imgHover.classList.add("hidden"); imgContainer.appendChild(imgHover); imgContainer.addEventListener("mouseover", makeVisible); function makeVisible(){ imgHover.classList.remove("hidden");; } 

 .hidden { display:none; } /* Used when an element needs to be hidden */ /* This will be applied via JS */ .hoverImg { width:30px; height:23px; position: absolute; margin:0 auto; left:45px; bottom:35px; } 

 <div id="container">Hover Over Me</div> 

Answer 3

Here you were appending element like this 
imgContainer.appendChild(imgHover);
So reference for imgHover element in dom will get 
change. Fetch that element once again inside 
makeVisible() function.
document.querySelector("img") // use your appropriate.