获取嵌套网格视图中图像鼠标悬停的动态详细信息

get dynamic details on image mouseover in nested gridview

本文关键字：悬停 动态 详细信息 鼠标 图像 嵌套 网格 视图 获取      更新时间：2023-09-26

我有一个嵌套的网格视图，当将鼠标悬停在 A 行中的图像上时，第一次页面不会加载任何弹出窗口，但是第二次将鼠标悬停在 A 行中的图像上会弹出正确的信息。

另一个问题是，当我将鼠标悬停在 A 行后将鼠标悬停在 B 行中的图像上时，A 行

的详细信息会从 A 行弹出 B 行，但是当我第二次将鼠标悬停在 B行上时，会弹出正确的详细信息。

我将非常感谢对此问题的任何帮助，因为我已经尝试解决它一段时间了。

JSFIDDLE 链接下面是一个演示

这是问题的解决方案

  $('img.imagepopupcontext').hover(function (e) {
          // Begin mouseover function
            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent
            count++;
            //$('#ctl00_ContentPlaceHolder1_txtcontextkey').val(cvalue);
            //$('#ctl00_ContentPlaceHolder1_btnmodalclick').click();
           // var img = $(this);
            $.ajax({url:'callbackdynamicdata.aspx',context:this,data:({ ID: cvalue}),success:
               function(data){
                    var html = '<div id="infopathpanel">';
                    html += data;
                    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('#infopathpanel')
                            .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.
                    var pos = $(this).offset();
                    $('#infopathpanel').css({
                        position: "absolute",
                        top: (pos.top - 170) + "px",
                        left: (pos.left - 310) + "px",
                        'background-color': '#ffffcc',
                        'width': '300px',
                        'border-color': '#060F40',
                        'border-width': '2px',
                        'color': '#060F40'
                    });               
               }})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var offsetY = -20;
            var offsetX = 40;
            var html = '<div id="info" class="InfoMessage"><h4>Info here </h4><p></p></div>';
            $(html).hide().appendTo('body');
            $('img.imagepopupcontext').hover(function (e) {
                $('div.InfoMessage').hide().find('p').text($(this).data('message'));
                $('div.InfoMessage').fadeIn(400);
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            }, function () {
                $('#info').hide();
            });
            $('img.imagepopupcontext').mousemove(function (e) {
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            });
        });
    </script>
    <style type="text/css">
        #info
        {
            background: #7F7777;
            width: 300px;
            padding-bottom: .5em;
            padding-right: 15px;
            overflow: hidden;
            position: absolute;
        }
    </style>
</head>
<body>
    <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 a
                        </td>
                        <td>
                            inner table2 A
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information A a" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            inner table b
                        </td>
                        <td>
                            inner table2 B
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information B b" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
        </p>
    </div>
</body>
</html>
相关文章：