Javascript 如何显示将鼠标悬停在表格行上方时出现的引导编辑和删除按钮

我有一个twitter引导表，每行的最后一个单元格中都有一个按钮组。 我希望这些按钮仅在用户将鼠标悬停在该行上时显示。需要分别单击“编辑”和“删除”图标

我有以下脚本 html

Java脚本

$(document).ready(function(){
    $('.nesting a').hover(function(){  
        $(this).children('span.pencil').css({'display' : 'inline-block'});
    },function(){  
        $(this).children('span.pencil').css({'display' : 'none'});
    });
});

看到这个演示了吗

---

我怎样才能正确地发展这个

我不知道我是否正确地理解了你想要什么，但是看看这把小提琴

您可以在document ready或css上隐藏铅笔链接，然后在显示

铅笔链接的类
嵌套
fire
悬停
事件的div上隐藏铅笔链接。事件
隐藏
铅笔
类链接

然后在
pencil
class中的
nesting
class div中插入click事件

附言：我在你的代码中没有找到任何删除按钮，但这和点击
pencil
class插入相同的原理

如果只想显示对应于行悬停的铅笔图标，可以在div
nesting
class中的每个链接上使用函数


$（文档）.ready（函数（）{
$（'.nesting a.pencil'）.hide（）；
$（'div.nesting a'）。每个（函数（）{
$（this）.hover（函数（）{
$（this.find（'.pencil'）.show（）；
}).mouseleave（函数（）{
$（this.find（'.pencil'）.hide（）；
});
})
$（'div.nesting.pencil'）。单击（函数（）{
警告（“你点击了铅笔”）；
}) 
});
.foo类{float:left；padding:3px；width:300px；minwidth:300px；}
.nesting span.pencil{float:right；}
.nestchild a{clear:both；display:block；}
.嵌套{背景色：#ccc；宽度：300px；}
.嵌套一个{宽度：285px；}
.nestchild{左边距：15px；}
相反，您可以使用jquery在“显示编辑删除按钮”上单击鼠标更新表行中的编辑和删除按钮


$（文档）.ready（函数（）{
//在tr鼠标上方显示按钮
$（“.hover tr”）.live（“mouseenter”，function（）{
$（this.find（“td:last child”）.html（“”）；
}); //
//拆下tr鼠标上的按钮
$（“.hover tr”）.live（“mouseleave”，function（）{
$（this.find（“td:last child”）.html（“”）；
});
//TD点击事件
$（“.hover tr”）.live（“单击”），函数（事件）{
如果（event.target.nodeName==“TD”）{
提醒（“你也可以追踪TD点击事件……这不是很神奇吗！！！”）；
}
});
});
editrow=函数（itemId）{
警报（“您单击了行id为“+itemId”的“编辑”链接）；
}
deleterow=函数（itemId）{
警报（“您单击了行id为“+itemId”的“删除”链接）；
}
表格{
字体系列：verdana；
字体大小：12px；
}
表th{
文本对齐：左对齐；
背景#d3；
填充：2px；
}
表tr：悬停{
背景：#efef；
}
表tr{
文本对齐：左对齐；
}
表td{
填充物：5px；
}
表td a{
颜色：#0454B5；
}

名字
姓
行动
机器人
安德罗
机器人
安德罗
机器人
安德罗
机器人
安德罗
机器人
安德罗
机器人
安德罗
您的案例不需要jQuery脚本。您只需使用css就可以做到这一点

只需在css中添加一个
：hover
样式


函数editItem（）{
警报（“单击编辑图标”）；
}
.foo类{
浮动：左；
填充：3倍；
宽度：300px；
最小宽度：300px；
}
.嵌套span.铅笔{
浮动：对；
}
nestchild先生{
明确：两者皆有；
显示：块；
}
.筑巢{
背景色：#ccc；
宽度：300px；
}
.筑巢{
宽度：285px；
}
a、 嵌套项目。铅笔{
显示：无；
}
a、 嵌套项：悬停。铅笔{
显示：块；
}
nestchild先生{
左边距：15px；
}

ok我需要在鼠标中加载一个铅笔图标悬停在table raw中作为示例，我需要在访问Foo raw时仅查看铅笔图标。哪一个铅笔图标？Foo，Bar或这是一个链接？我的意思是，当我将鼠标悬停在每个Foo栏上或这是一个链接时，我需要一次只显示一个铅笔图标。当我将鼠标悬停在foo上时，我需要foo raw上的图标，如果我将鼠标悬停在link raw上，那么我需要铅笔图标，这是link raw。编辑答案，现在铅笔将仅显示对应的行。我如何将另一个名称添加到此编辑和删除链接中，而不是将所有答案包装到代码块中，将JSFIDLE的代码添加到应答表中，并在悬停时调整tr的大小。我不想要这个@John添加了可以工作的引导js和css文件。我已经更新了代码。
.foo-class { float:left; padding : 3px; width:300px; min-width:300px; }
.nesting span.pencil { float:right; }
.nestchild a { clear: both;display : block; }
.nesting { background-color:#ccc; width:300px;}
.nesting a {width:285px;}
.nesting a .pencil {display : none; }
.nestchild { margin-left : 15px; }

$(document).ready(function(){
    $('.nesting a').hover(function(){  
        $(this).children('span.pencil').css({'display' : 'inline-block'});
    },function(){  
        $(this).children('span.pencil').css({'display' : 'none'});
    });
});