使用鼠标进入和退出时闪烁

Question

我试图创建一个效果，当鼠标移动到图像上时，它应该在图像上显示一个半透明的黑匣子，并在上面显示一些细节。这些div包含图像和问题是这个鼠标和鼠标事件正在创造闪烁的黑色半透明的div添加到顶部。

这是密码，

function addfocus(elem)
{
  // getting dimensions of current div.
   var currelem = document.getElementById(elem);
   var left = currelem.offsetLeft;
   var top = currelem.offsetTop;
   var w = currelem.offsetWidth;
   var h = currelem.offsetHeight;

   // create a new div to match up these dimensions. 
   var ddiv = document.createElement("div");
   ddiv.style.position = "absolute";
   ddiv.style.top = top + "px";
   ddiv.style.left = left + "px";
   ddiv.style.width = w + "px";
   ddiv.style.height = h + "px";

   ddiv.style.backgroundColor= "rgba(0,0,0,0.5)";

   document.body.appendChild(ddiv);
}

function rmvfoucs(elem)
{
    document.body.removeChild(document.getElementById(elem));
}

当div中只有文本时，就看不到闪烁。只有当图像包含在div中时，我才会看到闪烁。

如果您对此有任何解决方案，请帮助。

谢谢。

Answer 1

您的问题是，当您添加覆盖时，它会导致鼠标退出事件，从而移除覆盖。所以当你移动鼠标时，你会不断地添加和移除覆盖层。

但我不知道你为什么要用Javascript来做这个。它可以在CSS中完成，使用:悬浮。

<div class="item">
    <div class="info">...</div>
    <img src="..." />
</div>

在悬停时显示您的覆盖

.info {
    display:none;
}
.item:hover .info {
    display:block;
}

参见示例：http://jsfiddle.net/jj8X6/