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

Question

我创建了一个 <img/>来自 js 的元素，我希望它仅在 mouseover
时出现 回调函数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);

问题是不透明度和可见性在不折叠元素应占据的空间的意义上将发挥相同的作用。不同之处在于隐藏元素将忽略鼠标/指针事件。