jquery - 透明的 css 边框作为占位符

Question

请查看以下两个 fiddle 文件以了解我正在努力解决的问题:

我想要在悬停效果上加一个边框来突出显示，但是我对下面的两个代码不满意:

http://jsfiddle.net/hnxan9ck/7/

这个不令人满意，因为当您将鼠标悬停在行上时表格会摇晃，然后我尝试了以下

http://jsfiddle.net/gyb314/hnxan9ck/4/

这也不起作用，因为边框与未选中行的其他边框重叠。

.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all table.ui-datepicker-calendar tbody tr {
    border-style: none;
    border-color: rgba(255, 0, 0, 0);
    border-width: 4px;
}
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all table.ui-datepicker-calendar tbody tr:hover {

    border-style: dotted;
    border-color:red;
    border-width: 4px;
}

所以对于没有被鼠标悬停的行，如果我将边框设置为无，那么它会晃动，但是如果我将边框设置为实心但透明，它仍然会阻挡悬停行的边框。

有没有办法拥有真正不可见的占位符边框？

Answer 1

给你:http://jsfiddle.net/AndrewL32/hnxan9ck/8/

只需使用 outline 而不是 border 来添加边框颜色，它应该可以很好地工作:)

.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all table.ui-datepicker-calendar tbody tr {
    outline: 2px dotted white;
}
.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all table.ui-datepicker-calendar tbody tr:hover {
    outline: 2px dotted red;
}