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 - 应该这样做：）

显示表格行的div onmouseover，并使用行属性动态设置文本和URL

1 个答案: