javascript - 在跨度悬停时在鼠标光标处显示 DIV

标签 javascript jquery html

当用户将鼠标悬停在 SPAN 或 DIV 上时,我希望 DIV 取消隐藏并显示在鼠标光标处。

我做了这个函数,但它不起作用(加载了 jquery)。

function ShowHoverDiv(divid){

    function(e){
        var left  = clientX  + "px";
        var top  = clientY  + "px";
        $("#"+divid).toggle(150).css("top",top).css("left",left).css("position","fixed");
        return false;
    }


}

<div id="divtoshow" style="display:none">test</div>
<br><br>
<span onmouseover="ShowHoverDIV('divtoshow')">Mouse over this</span>

最佳答案

你几乎在那里:

function hoverdiv(e,divid){

    var left  = e.clientX  + "px";
    var top  = e.clientY  + "px";

    var div = document.getElementById(divid);

    div.style.left = left;
    div.style.top = top;

    $("#"+divid).toggle();
    return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divtoshow" style="position: fixed;display:none;">test</div>
    <br><br>
    <span onmouseover="hoverdiv(event,'divtoshow')" onmouseout="hoverdiv(event,'divtoshow')">Mouse over this</span>

关于javascript - 在跨度悬停时在鼠标光标处显示 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15158180/

相关文章:

JavaScript 代码导致 &lt;header&gt; 和 <nav> 元素不在浏览器中显示

jquery - 如何设置 2 个更改效果影响 1 个选择

javascript - 如何根据 URL 在 polymer 元素上执行 select() 方法?

javascript - 如何正确地将 keyup() 函数应用于具有不同输入的不同 DOM 元素?

javascript - 当 Bootstrap JS 低于 jQuery JS 问题时,移动菜单不会关闭

html - intel XDK 到底产生什么输出

javascript - 使用 getCell jqgrid 获取 html 值

Javascript 设置对象选项

javascript - 是否有从 iFrame 文档调用父文档中的函数的 jQuery 约定?

javascript - 使用 AJAX 删除项目而不刷新页面