将鼠标hover在桌面上时如何放大？

我正在尝试构建一个类似于鼠标放大图像的jQuery插件 – 但是在表行上：

var trEnlargedCssMap = { position: 'absolute', left: '50px', top: '50px', 'font-size': '14px' } $('table tr').hover( function() { $(this).clone().css(trEnlargedCssMap).show(); }, function() { $(this).hide(); }) 

它不接近工作，任何提示？

Answer 1

您必须将它附加到DOM /表（随时随地）。 我将它附加到现有表格。 当你将鼠标hover而不是隐藏它们时，你也应该.remove()任何克隆的元素。 请根据您的应用需要更改属性。

的jsfiddle

 var trEnlargedCssMap = { position: 'absolute', left: '50px', top: '50px', 'font-size': '20px' } $('table tr').hover( function() { $(this).closest("table").append( $(this).clone().addClass("cloned-element").css(trEnlargedCssMap).show()) }, function() { $(this).closest("table").find(".cloned-element").remove(); })​ 
 
 
Row 1
 
Row 1
 
Row 1
 
 
 
Row 2
 
Row 2
 
Row 2
 
 
 
Row 3
 
Row 3
 
Row 3
 
 
​ 

Answer 2

你需要在某处append()它。 在这里你只是克隆它，什么都不做……

所以$(this).clone().css(trEnlargedCssMap).appendTo('#myZoomedRow');

Answer 3

您必须将该clone元素附加到DOM，并隐藏（或删除它以防止冲突）克隆实际行的“new”元素。

 var trEnlargedCssMap = { position: 'absolute', left: '50px', top: '50px', 'font-size': '14px' } $('table tr').hover( function(){ $(this).clone().css(trEnlargedCssMap).appendTo("#newRow").show(); }, function(){ $("#newRow").hide(); } )