将鼠标悬停在表格行上的Twitter引导按钮

我在每行的最后一个单元格中有一个按钮组的twitter引导表。将鼠标悬停在表格行上的Twitter引导按钮

button group in a table cell

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

enter image description here

这里是html布局的小提琴我用http://jsfiddle.net/hDafj/

而这正是我想已经做http://jsfiddle.net/hDafj/2

来源

2013-06-27 Devellar

哪来的代码，你试过吗？ – slash197

增加了一个链接到HTML布局。 – Devellar

这只是标记，那你尝试做？ – slash197

嗯，我觉得反正你需要一些额外的风格在这里。我添加了.btn-group-hover类，使按钮的边框，阴影和背景变成白色（这样它们的大小始终相同）。所有.icon-white图标也应该分开处理以避免它们在行悬停的白色背景上显示为白色。这里是我建议的解决方案：http://jsfiddle.net/hDafj/3/但这里唯一的问题是，它只在白色tr背景上看起来很好。

来源

2013-06-27 10:06:39

看起来不错！你认为有可能使它只用CSS来工作吗？ – Devellar

我认为这是可能的，但在使用jQuery浏览器支持的情况下更好。 –

我们可以只用CSS

CSS这样做

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

这里是更新fiddle

来源

2013-06-27 09:46:52

感谢您的回答，但这不完全是我想要的。我希望它只在行悬停上显示图标**，并在按钮组悬停上显示按钮。请看看我已经试过做什么jsfiddle.net/hDafj/2 – Devellar

试试这个http://jsfiddle.net/guyisra/hDafj/5/这可能会帮助你开始（需要固定取向，你可以d对自己

用JS添加类和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; 
}

来源

2013-06-27 10:10:41

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

将鼠标悬停在表格行上的Twitter引导按钮

回答

相关问题