Javascript 如何使用jQuery显示HTML元素？

我这里有一些代码，当您将鼠标移到另一个元素上时，应该将1个元素上的

display:none

更改为

display:block

HTML:

$(document).ready(function(){
    $("body").append('<div id="pup"></div>'); // Appends a popup div to the page
    $(document).mousemove(function(e){
        var x,y;                                   // This sets the mouse
                                                   // coordinates into 2
        x = $(document).scrollLeft() + e.clientX;  // variables in order to
        y = $(document).scrollTop() + e.clientY;   // display the tooltip
    });                                            // relative to mouse postition

    function popup(text)
    {
        $('#pup').html(text);  // This is supposed to enter text into the tooltip
        $('#pup').show();      // div and change it from display: none to
                               // display: block
    }

Lorem

Javascript:

$(document).ready(function(){
    $("body").append('<div id="pup"></div>'); // Appends a popup div to the page
    $(document).mousemove(function(e){
        var x,y;                                   // This sets the mouse
                                                   // coordinates into 2
        x = $(document).scrollLeft() + e.clientX;  // variables in order to
        y = $(document).scrollTop() + e.clientY;   // display the tooltip
    });                                            // relative to mouse postition

    function popup(text)
    {
        $('#pup').html(text);  // This is supposed to enter text into the tooltip
        $('#pup').show();      // div and change it from display: none to
                               // display: block
    }

$（文档）.ready（函数（）{
$（“body”）.append（“”）；//将弹出式div追加到页面
$（文档）.mousemove（函数（e）{
var x，y；//这将设置鼠标
//坐标为2
x=$（document.scrollLeft（）+e.clientX；//变量，以便
y=$（document.scrollTop（）+e.clientY；//显示工具提示
})；//相对于鼠标位置
功能弹出窗口（文本）
{
$（'#pup'）.html（text）；//这应该是在工具提示中输入文本
$（'#pup'）.show（）；//div并将其从display:none更改为
//显示：块
}

当前，div存在（但是您看不到它，因为它在CSS中设置为
display:none
，但是当您将鼠标悬停在li上时，它不会显示。谢谢！
我支持Russ C的注释。将弹出框移出$（文档）。准备好了，但不是作为全局函数。将其指定为匿名函数，并将jQuery作为参数

不知道您需要有关鼠标事件的帮助。这一项显示在鼠标下方。“title”属性只能保存纯文本，因此如果您需要不太健壮的内容，请使用该属性

试试这个

    $(document).ready(function(){
        var loremHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href=''>Vivamus non elit risus</a>, a dignissim ligula."
        $("#lorem").hover(function() {$.popup(loremHTML)},function() {$("#pup").hide().remove()});
        $(document).mousemove(function(ev) {
            $.mousePos = {      //Assign mousePos to the jQuery object
                x: ev.pageX,    //x coordinate
                y: ev.pageY     //y coordinate
            };
        });
     });   

     (function($) {
        $.popup = $.fn.popup = function(text) {
            $("body").append('<div id="pup"></div>');
            $('#pup').show().css({
                "position":"absolute",
                "left":$.mousePos.x,
                "top":$.mousePos.y})
                .html(text);
        }
     })(jQuery);

HTML

Lorem
看看如何将弹出函数的定义移到$（文档）之外。就绪（…）代码块。它应该是全局定义的。另一种选择是：您可以通过执行
Lorem
将此方法实现到我的Javascript中后，每当我将鼠标悬停在
li
元素上时，就会显示弹出窗口，这正是我在问题中要求的。不可原谅总之，由于弹出窗口不会相对于我的鼠标在页面上移动，我想我只能尝试更改元素的
标题
，尽管我认为这样做会是一种有趣的体验。谢谢你们的帮助，伙计们！如果你们想让小狗随鼠标移动，请更改您的mousemove处理程序以更新它的位置。
<span id="lorem">Lorem</span>