Question

我的javascript是

 function Show1()
    {
        //document.getElementById("Popup_tooltip").style.overflow="auto";
        document.getElementById("Popup_tooltip").style.display="block";
    }
    function Hide1()
    {
        /* hide the pop-up */
        document.getElementById("Popup_tooltip").style.display="none";

    }

我的div为css

.tooltip
{   
    display:block;
    position:absolute;
    top:145px;
    left:700;
    width:100%;
    height:100%;

}

我的div是

<div id="Popup_tooltip" class="tooltip" >               
        <table width="180" height="70" border="1" bordercolor="#3a93ed" style="border-collapse:collapse;" cellspacing="0" cellpadding="0">
            <tr>
                <td bgcolor="#ebf5ff">
                    Help contents related to this topic will display here.
                    As a tooltip, if u need for help?
                </td>
            </tr>
        </table>                
</div>

和onmouseover和mousehide我调用函数show和hide .. 它在IE中正常运行但在Mozilla中存在问题请尽快回复感谢名单

Answer 1

您将鼠标事件绑定到哪个确切元素？

这种效应有两个常见原因。一个是绊倒你自己的状态，因为鼠标悬停有效地隐藏了当光标再次移动时触发鼠标移动的对象，无限制。另一个是两个事件在不同的对象上，并在一个隐藏本身上跳过并在下一个事件上触发一个事件。

Answer 2

它在IE中正常运行但在Mozilla中存在问题

对我来说很好。你必须告诉我们你遇到的确切问题。

左：700;

应为700px。

onmouseover和mousehide我调用函数

大概你的意思是onmouseout。

Answer 3

当您移动到建立事件处理程序的元素的其中一个子元素的区域时，将触发MouseOut事件。

我已经从精彩的jQuery in Action到demonstrate here

中获取了代码

第一个div（外部1）具有用于mouseover和mouseout事件的事件处理程序。每次引发事件时，事件处理程序都会在div下面写入事件的名称。当您越过外部1和内部1之间的边界时，mouseout和mouseover事件处理程序将触发，这会导致闪烁。

第二个div（外部2）具有用于mouseover和mouseout事件的事件处理程序，但这些事件是通过jQuery .hover（）命令创建的。当外部2和内部2之间的边界交叉时，事件处理程序不会触发，但是当鼠标穿过外部2边界时会执行。

我相信这是你的问题。

注意：这是不的答案，说“使用jQuery” - 我只使用jQuery代码来突出问题。

Answer 4

我的同事遇到了同样的问题。以下是我们的问题，请检查它是否与您匹配：

在我们的例子中，工具提示是一个 div 元素，当鼠标移动到链接上时，该元素被隐藏并可见。此外，当鼠标移出链接时， div 元素将被隐藏。

我们的代码存在的问题是，工具提示在可见时通过链接传来。因此，鼠标光标有效地停留在工具提示上。也就是说，鼠标不在链接的顶部，而是在工具提示的顶部。在这种情况下，Mozilla Firefox会触发'onMouseOut'事件，导致工具提示消失。

现在鼠标光标位于链接上，因此触发了'onMouseOver'事件并且工具提示可见。这种情况一直持续......

解决方案是使用比链接更高的z-index属性用于工具提示。尝试确保给出的z-index值是正数，因为Firefox不识别负数。

Answer 5

我遇到了类似的问题。用户将指针移动到图像的顶部，并且div在指针的位置浮动在页面上方，同时显示另一个图像。 IE似乎没有问题，但是整个div都用Firefox闪烁。

Shree所说的关于指针位于工具提示之上的内容帮助我解决了这个问题。我所做的是，不是将div的x和y设置为指针的确切位置，而是将其放置2或3像素。这样可以防止鼠标越过div，从而触发mouseout事件。修复它并不是一种非常优雅的方法，但如果您的工具提示太高，则可以使用2-3像素。

Answer 6

你有没有想过使用已经为跨浏览器创建和测试的JavaScript库？

喜欢jQuery（给你这个，因为它是微软采用的那个）

使用这个库你可以写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="_assets/js/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#Popup_tooltip").hide();

            $("#showTooltip").hover(function() {
                $("#Popup_tooltip").show("slow").stop;
            }, function() {
                $("#Popup_tooltip").hide("slow").stop;
            });
        });        
    </script>

    <style type="text/css">
        .tooltip
        {
            width: 180px;
            height: 70px;
            border: solid 1px #ea93ed;
            background-color: #ebf5ff;
            padding: 5px;
        }
    </style>
</head>
<body>
    <a id="showTooltip" href="#">click here to show the tooltip</a>
    <div id="Popup_tooltip" class="tooltip">
        Help contents related to this topic will display here. As a tooltip, if u need for
        help?
    </div>
</body>
</html>

或仅使用jQuery Tooltip插件，例如

div隐藏并显示在Mozilla中有闪烁问题的javascript

6 个答案: