jquery - transparent css border as a place-holder -
please take @ following 2 fiddle files see problem struggling with:
i want border on hover effect highlighting, not satisfied 2 following codes have:
http://jsfiddle.net/hnxan9ck/7/
this 1 not satisfactory because table wobbles mouse-over rows, tried following
http://jsfiddle.net/gyb314/hnxan9ck/4/
this not work either, because border overlapped other borders of unselected rows.
.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; }
so rows not hovered mouse, if set border none, wobbles, if set border solid transparent, still blocks border of hovered rows.
is there way have invisible place-holder border?
here go: http://jsfiddle.net/andrewl32/hnxan9ck/8/
just use outline
instead of border
add border color , should work beautifully :)
.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; }
Comments
Post a Comment