0

我正在为 CSS 弹出窗口而苦苦挣扎，希望有人能提供帮助。

我们有各种 tds 在他们的单元格中有这个弹出窗口，在 firefox、chrome 等（通常）中它工作正常。但是在 IE8 以下的旧浏览器中，它会出现问题。

当鼠标移出单元格时，似乎 :hover 会丢失，即使它移动到弹出区域（位于单元格下方）上也是如此。您可能会说是的，这是它应该做的，但是在 Firefox 中悬停的父元素的子元素将 :hover 类保留在父元素上。

弹出 div 是绝对定位的，并且给定的 margin-left 为 -999px；（还行吧）

在父 div 元素的 :hover 上，margin-left 设置为 -125px（弹出 div 宽度的一半，因此它居中 - 也可以）

如前所述，这一切都很好，并且在现代浏览器中完美运行。

HTML 片段

<tr>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
</tr>

CSS 迄今为止

#page-content .block_calendar_month { overflow: visible; }

.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; }

.tooltip span { margin-left: -999em; position: absolute; }
td.day:hover { background-color: #fbf16b; }

.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; }

.tooltip:hover span div { }
.events {padding: 0.8em 1em; }

希望有人能给我一些建议，因为我已经失去了几个小时试图解决这个问题。

4

1 回答 1

1

我有一段时间没有接触过 IE6，但是通过使用 IE7，我可以告诉你它在表格和 z-index 方面做了一些时髦的事情。我发现使用工具提示时最好的解决方案是不使用表格。为什么不去掉表格代码并拥有：

<div class="tooltip">
    <span class="events">CONTENT</span>
</div>

另外，我不确定您使用的是什么插件（实际上，您似乎没有使用任何插件），但是如果您使用 JQuery Tools 工具提示插件，则可以将弹出窗口的偏移距离设置为 JSON 参数。阅读更多http://jquerytools.org/demos/tooltip/dynamic.html。

If you are going to keep the current implementation, I'd recommend toggling between display:block and display:none for the tooltip.

于 2013-02-13T20:00:56.780 回答