悬停弹出窗口不能在我的主代码中工作

时间:2013-03-11 23:50:14

标签: javascript jquery html css jquery-ui

我正在处理鼠标悬停弹出.... 当我单独执行时,它工作正常.... 但是当我将它与我的整个代码结合起来时,它的效果并不理想...... 我甚至包括jquery库.... 如何解决它.... 在下面提供我的代码....

http://jsfiddle.net/rajkumart08/X9a6j/1/embedded/result/

<script type="text/javascript">

            var tooltipTimeout;

            $("#someelem").hover(function()
                                {tooltipTimeout = setTimeout(showTooltip, 2000);}, 
                                hideTooltip);

            function showTooltip()
                {
                var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
                tooltip.appendTo($("#someelem"));
                }

            function hideTooltip()
                {
                clearTimeout(tooltipTimeout);
                $("#tooltip").fadeOut().remove();
                }
            </script>


            <style>

                #someelem
    {
    cursor: pointer;
    }

.tooltip
    {
    display: block;
    position: absolute;
    background-color: rgb(130, 150, 200);
    padding: 5px;
    }


<span id="someelem">Hover me for 2 seconds!</span>

2 个答案:

答案 0 :(得分:0)

你确定在Javascript之前加载了DOM元素吗?

尝试包装您在就绪函数中发布的代码块

$(function(){
    // code you posted
});

答案 1 :(得分:0)

$(document).ready(function(){
    $("#someelem").hover(function() {
        console.log("In hover");
                tooltipTimeout = setTimeout(showTooltip, 2000);

            },
            hideTooltip);
     });

$(document).ready(function(){ });的帮助下,它将进入悬停功能。 它正在控制台日志中打印“悬停”。