如何在不破坏此 DIV 的悬停区域的情况下在 DIV 上放置一些文本？

Question

我完全是 CSS 的菜鸟，它看起来像地狱 =/

我有绝对定位的 DIV，我用 JS 处理这个 DIV 上的鼠标事件，如下所示：

    <div style='position: absolute; left: 0px; width:50px; height: 50px;'
      onmouseover='this.style.border="2px solid red"' 
      onmouseout='this.style.border="1px solid black"'>
    </div>
    <div style='position: absolute;'>SOME TEXT</div>

我需要在这个 DIV 和几个相同的 DIV 上放置一些文本，但是如果我在这个 DIV 上放置任何元素，则当鼠标光标切换到文本时会触发 onMouseOut 事件。带有文本的标签不能在 DIV 内。玩 z-index 没有帮助。我的浏览器是IE8。

更新： 我不能将文本放入 div，因为文本必须超出 DIV 的范围。换句话说，我想在任何文本中的任意区域处理鼠标事件。如果我设置DIV的backgroundColor可以做到这一点，但我需要处理透明区域的事件。

Answer 1

在文本 div 上尝试过{cursor: pointer}？

Answer 2

如果您尝试纯粹使用鼠标悬停事件来完成此操作，那么实现您所追求的唯一方法是将第二个 div 放在第一个 div 内。

另一方面，如果您想深入研究一些脚本，这里有一个基本算法来处理这个问题：

1. 设置当您将鼠标悬停在触发器 div 上时触发的函数。此函数将显示“SOME TEXT”div，如果它的显示设置为“none”。
2. 设置一个函数以在鼠标移出触发器 div 时触发。这个函数会稍微复杂一些。首先，您必须检查 event.currentTarget 是什么；如果 event.currentTarget 是“SOME TEXT” div，则返回 false。如果是其他内容，则将“SOME TEXT”的显示设置为“none”。

这可能超出了您使用 CSS 和 JS 的水平，但它几乎是完成它的唯一方法，因为仅靠 CSS 无法满足您的需求。