使用鼠标移入和移出时闪烁

Question

我正在尝试创建一种效果，当鼠标移到图像上时，它应该在图像上显示一个半透明的黑框并在顶部显示一些细节。这些 div 包含图像，问题是这个 mouseover 和 mouseout 事件正在创建顶部添加的黑色半透明 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

您的问题是，当您添加叠加层时，它会导致删除叠加层的 mouseout 事件。因此，当您移动鼠标时，您会不断添加和删除覆盖。

但我不确定你为什么要为此使用 Javascript。它可以在 CSS 中使用 :hover 来完成。

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

悬停时显示叠加层

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

查看示例：http://jsfiddle.net/jj8X6/