javascript - 在表行上显示 div onmouseover，并使用行属性动态设置文本和 URL

Question

我正在制作价格比较表，并希望以不同的方式显示每个选项的更多信息。

当用户将鼠标悬停在一行上时，我希望该行显示有关该功能的更多信息。我现在可以使用 jQuery 和 div 来完成这项工作。

$(document).ready(function() {
    $('#row').mouseover(function() {
        var $divOverlay = $('#divOverlay');
        var bottomWidth = $(this).css('width');
        var bottomHeight = $(this).css('height');
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,
            left: bottomLeft,
            width: bottomWidth,
            height: bottomHeight
        });
        $divOverlay.text($(this).closest('tr').attr('desc'));
        $divOverlay.delay('100').fadeIn();
        $(this).closest('tr').css({ opacity: 0.01 });

    });
    $('#divOverlay').mouseleave(function() {
        var $divOverlay = $('#divOverlay');
        $('#row').css({ opacity: 1 });
        $divOverlay.fadeOut();
    });
});

我现在的问题在于，在某些情况下，我想包含指向视频或另一个页面(在新选项卡中打开)的链接 - 以便在需要时为用户提供更多信息。但是我的工作方式是，链接不是呈现为 html，而是显示为文本。有人知道我还能怎么做吗？

完整的功能示例: http://jsfiddle.net/rMXAp/1/

我的另一个想法是为 div 设置一个 onclick，其中 href 取自“desc_link”属性(参见 jsfiddle 示例中的非标题行)，但我不确定如何设置它使用 jQuery。

我认为它与我尝试的以下内容类似:

$divOverlay.setAttribute('onclick',$(this).closest('tr').attr('desc_link'));

欢迎提出建议!

Answer 1

尝试使用 .html 而不是 .text - 应该可以解决问题:)