Question

我正在尝试构建一个类似于鼠标悬停的放大图像的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 /表（随时随地）。我将它附加到现有表格。当你将鼠标悬停而不是隐藏它们时，你也应该.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();
})



<table>
<tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
</tr>
<tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
</tr>
</table>

Answer 2

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

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

Answer 3

您必须将该克隆元素附加到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();
                    }
                    )

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

3 个答案: