如何使用jQuery顯示HTML元素？

Question

我在這裏有一些代碼，當你將鼠標放在另一個元素上時，它應該在1個元素上改變display: none到display: block。

HTML：

<li onmouseover="popup('Ipsum');">Lorem</li>

的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 
    } 

目前，DIV存在（但你看不到它，因爲它是在CSS設置爲display: none ，但是當你將鼠標懸停在li上時，它不顯示。謝謝！

Answer 1

我第二個Russ C的評論。將彈出菜單移出$（document）.ready，但不能作爲全局函數。將其指定爲匿名函數並將jQuery作爲參數。

不知道你想要幫助鼠標事件。這個出現在鼠標下面。 「標題」屬性只能保存純文本，所以如果你想要的東西不那麼強大，那就去吧。

試試這個

$(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); 

CSS

 #pup { 
      background:#ddd; 
      padding:5px; 
      width:20%; 
     } 

HTML

<span id="lorem">Lorem</span>