javascript - 如何在鼠标悬停表格行上的鼠标旁边显示图像

Question

当访问者将鼠标悬停在表格行上时，我试图在鼠标旁边显示一个图像。 对于每一行，我想显示另一张图片。

目前，我只让它处理表格单元格内的内容，并且只处理内容本身，而不处理整行，无论它是否有内容。

我正在使用以下 jQuery 代码:

<script type="text/javascript">
    this.screenshotPreview = function() {
        /* CONFIG */
        xOffset = 0;
        yOffset = 0;
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        /* END CONFIG */
        $(".screenshot").hover(function(e) {
            this.t = this.title;
            this.title = "";
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $("body").append("<p id='screenshot'><img src='" + this.rel + "' alt='Drinkbak' />" + c + "</p>");
            $("#screenshot")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
            },
            function() {
                this.title = this.t;
                $("#screenshot").remove();
            }
        );
        $(".screenshot").mousemove(function(e) {
            $("#screenshot")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px");
        });
    };

// starting the script on page load
    $(document).ready(function() {
        screenshotPreview();
    });
</script>

确实有效的代码，但仅适用于表格单元格中的内容:

<tr onclick="window.open('/Drinkbak-type-B-80-geschikt-voor-rundvee-en-paarden_pr_850861?i-knop', '_blank');">
    <td class="wkekaSubject"><a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a></td>
    <td class="wkeka2Options wkekaOption1">X</td>
    <td class="wkeka2Options wkekaOption2">&nbsp;</td>
    <td class="wkeka2Options wkekaOption3">&nbsp;</td>
    <td class="wkeka2Options wkekaOption4">X</td>
    <td class="wkeka2Options wkekaOption5">&nbsp;</td>
    <td class="wkeka2Options wkekaOption6">&nbsp;</td>
    <td class="wkeka2Options wkekaOption7">&nbsp;</td>
</tr>

这里是 <a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a>元素负责图像缩略图。

有人可以帮我让这段代码在整个表格行上工作吗？

Answer 1

您的目标是“屏幕截图”类以显示工具提示。这就是问题。要解决此问题，您必须使用“tr”而不是“td”中的“a”标签绑定(bind)事件。所以我的建议是，

//Bind the event with "tr" and delegate the event to "a" tag
$('tr').on('mouseenter','td a[rel]', function(e) {
    this.t=this.title;
    this.title="";
    var c=(this.t!="")?"<br/>"+this.t:"";
    $("body").append("<p id='screenshot'><img src='"+this.rel+"' alt='Drinkbak' />"+c+"</p>");
    $("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast");
})

注意:我还没有测试我的代码并添加了处理鼠标离开的函数。我把这些东西留给你了。