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放在第一个div内。

另一方面，如果你想深入研究一些脚本，这里有一个基本的算法来解决这个问题：

设置要在鼠标悬停触发器div时触发的功能。如果显示设置为“none”，此函数将显示“SOME TEXT”div。
设置一个函数，当您使用触发div的鼠标输出时触发。这个功能会有点复杂。首先，你必须检查event.currentTarget是什么;如果event.currentTarget是“SOME TEXT”div，则返回false。如果是其他任何内容，则将“SOME TEXT”的显示设置为“none”。

这可能会超出CSS和JS的范围，但它几乎是完成它的唯一方法，因为仅靠CSS不能满足您的需求。

Answer 2

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

如何在DIV上放置一些文字而不破坏这个DIV的悬停区域？

2 个答案: