Question

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

您的问题是，当您添加叠加层时，会导致鼠标移除事件，从而移除叠加层。因此，当您移动鼠标时，您不断添加并移除叠加层。

但我不确定你为什么要使用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/

使用鼠标和鼠标时闪烁

1 个答案: