2

弹出窗口正在从数据库中获取信息，并将其动态添加到面板中，一旦您将鼠标悬停在嵌套网格视图中的图像上，它将在该面板中显示。弹出窗口的位置也应该在图像的左侧。当您将鼠标悬停在图像上时，它会随着我的鼠标移出而迅速消失。如果有人可以提供帮助，则需要帮助，因为我一直在尝试通过使用 jquery 来实现这一点，我也是新手。

 $('img.imagepopupcontext').mouseover(function () {
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent
            count++;
            $('#ctl00_ContentPlaceHolder1_txtkey').val(cvalue);
            $('#ctl00_ContentPlaceHolder1_btnpopupclick').click();

            var pos = $(this).offset();

            $('#ctl00_ContentPlaceHolder1_panelshow').css({
                position: "absolute",
                top: (pos.top - 100) + "px",
                left: (pos.left - 310) + "px"
            });
            $('#ctl00_ContentPlaceHolder1_panelshow').css('display', 'block');
            //alert('image test over' + pos.left + "," + pos.top);

        });

        $('img.imagepopupcontext').mouseout(function () {
            //alert(count);
            count = 0;
            //$('#ctl00_ContentPlaceHolder1_btnpopupclick').html('');
            $('#ctl00_ContentPlaceHolder1_panelshow').hide();
            //alert('image test mouse out');

        });

点击这里查看 JSFIDDLE

4

1 回答 1

2

我认为下面的代码将使您开始您的旅程。我还更新了您的 JSFiddle。不过，我不知道它是否会保存在您的帐户中。

jQuery 中的悬停功能结合了“mouseover”和“mouseout”，因此使用起来更容易一些。

CSS

    #info
    {
        background: #CCC;
        width: 300px;
        padding-bottom: .5em;
        padding-right: 15px;
        overflow: hidden;
        position: absolute;
    }

HTML

    <table border="1" bgcolor="skyblue">
        <tr>
            <td>
                in progress
            </td>
            <td>
                Sale
            </td>
        </tr>
        <tr>
            <td>
                in progress
            </td>
            <td>
                <table border="1" bgcolor="orange">
                    <tr>
                        <td>
                            inner table
                        </td>
                        <td>
                            inner table2
                        </td>
                        <td>
                            <img id="imgpopup" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
            Show information from database
        </p>

jQuery

    $(function () {

        // Set the offsets for the mouse over upfront 
        // so they are easier to change.
        var offsetY = -20; 
        var offsetX = 40;

        $('#imgpopup').hover(function (e) {
            // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var $dbInfo = $('#dbInfo');

            // Create a variable that will hold the HTML
            // for the pop up. However, this is not the best
            // way dynamically create the popup. You should
            // look into jQuery templating.
            var html = '<div id="info">';
            html += '<h4>Info here</h4>';
            html += '<p>' + $dbInfo.text() + '</p>';
            html += '</div>';

            // Append the variable to the body and the select
            // itself and its children and hide them, so you
            // can then add a fadeIn effect.
            $('body')
                .append(html)
                    .children('#info')
                    .hide()
                    .fadeIn(400);

            // This is where the popup offesets away from your cursor
            // The variables set up top will decide how far away the
            // pop up strays away from your cursor.
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);

        }, function () {
            // Begin mouseout function

            // Remove on mouse out
            $('#info').remove();
        });

        // Whenever the mouse moves the popup will follow using
        // the offsets set up top.
        $('#imgpopup').mousemove(function (e) {
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
        });

    });
于 2012-05-03T18:27:51.407 回答