Question

请查看以下两个小提琴文件，看看我正在努力解决的问题：

我想在悬停效果上设置边框以突出显示，但我对以下两个代码不满意：

这个并不令人满意，因为当你将鼠标放在行上时表格会摇摆不定，然后我尝试了以下

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

.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;
}

因此，对于未被鼠标悬停的行，如果我将边框设置为无，则它会摆动，但如果我将边框设置为实心但透明，则它仍然会阻挡悬停行的边框。 / p>

有没有办法让真正看不见的占位符边框？

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;
}

透明的CSS边界作为占位符

1 个答案: