将鼠标悬停在表格行上时出现的 Twitter 引导按钮答案

【问题标题】：Twitter bootstrap buttons appearing on hover over the table row将鼠标悬停在表格行上时出现的 Twitter 引导按钮
【发布时间】：2016-01-13 02:23:46
【问题描述】：

我有一个 twitter 引导表，每行的最后一个单元格中有一个按钮组。

我希望这些按钮仅在用户将鼠标悬停在该行上时出现。此外，当用户将鼠标悬停在行上（而不是按钮组本身）时，只会出现图标，然后当他将鼠标悬停在按钮组上时，图标应该像按钮一样显示。

这是我使用的html 布局http://jsfiddle.net/hDafj/

这就是我已经尝试做的http://jsfiddle.net/hDafj/2

【问题讨论】：

你试过的代码在哪里？
添加了指向 html 布局的链接。
这只是标记，你试图做什么？
这是我尝试做的jsfiddle.net/hDafj/2 但它只是显示和隐藏按钮。我希望它只在行悬停时显示图标，在按钮组悬停时显示按钮。

标签： jquery css twitter-bootstrap

【解决方案1】：

我们只需CSS就可以做到这一点

CSS

table.table tr td div.btn-group { display:none;}
table.table tr:hover td div.btn-group { display:inline-block;}

这是更新后的fiddle

【讨论】：

感谢您的回答，但这并不是我想要的。我希望它在行悬停时显示图标only，并在按钮组悬停时显示按钮。请看看我已经尝试做的事情 jsfiddle.net/hDafj/2

【解决方案2】：

好吧，我认为无论如何你都需要一些额外的样式。我添加了.btn-group-hover 类以使按钮的边框、阴影和背景为白色（这样它们的大小将始终相同）。所有.icon-white 图标也应单独处理，以避免它们在行悬停时在白色背景上显示为白色。这是我建议的解决方案：http://jsfiddle.net/hDafj/3/ 但这里唯一的问题是它仅在白色tr 背景上看起来不错。

【讨论】：

看起来不错！您认为仅使用 css 可以使其以相同的方式工作吗？
我认为是可以的，但是如果使用jQuery浏览器支持更好。

【解决方案3】：

试试这个http://jsfiddle.net/guyisra/hDafj/5/，它可能会帮助你开始（需要修复对齐，你可以自己解决）

使用js为行悬停添加class和css

$(".btn-group a").hover(function () {
    $(this).addClass("btn");
}, function () {
    $(this).removeClass("btn");
}

);

css

.btn-group {
    visibility:hidden;
}
table tr:hover .btn-group {
    visibility:visible;
}

【讨论】：

谢谢！你明白了。但是按钮会在悬停时跳转。我喜欢 Iurii.K 给出的解决方案。