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



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

当用户将鼠标悬停在一行上时,我希望该行显示有关该功能的更多信息。我现在使用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'));

欢迎提出建议!

尝试使用.html而不是.text-应该可以做到:)

最新更新