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 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");
})

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

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

1 个答案: