3

別の要素の上にマウスを置くと、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は存在します(ただしdisplay: none、CSSでに設定されているため表示されませんが、liの上にマウスを置くと表示されません。ありがとうございます。

4

1 に答える 1

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>
于 2012-07-30T00:53:45.703 に答える