将鼠标悬停在桌面上时如何放大？ [英] How can I enlarge a table row when hovering over it?

问题描述

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

I am trying to build a jQuery plugin that resembles the enlarge image on mouse over - but on table rows:

var trEnlargedCssMap = 
{
    position: 'absolute',
    left: '50px',
    top: '50px',
    'font-size': '14px'
}

$('table tr').hover(
    function()
    {
        $(this).clone().css(trEnlargedCssMap).show();
    },
    function()
    {
        $(this).hide();
    })

它没有接近工作，任何提示？

It not close to working, any tips?

推荐答案

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

You have to append it to the DOM/table (whereever you want). I appended it to the existing table. You also should .remove() any of the cloned elements when your hover out as opposed to hiding them. Please change the attributes as needed for your application.

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>​

这篇关于将鼠标悬停在桌面上时如何放大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！