CODEWITHSUNDEEP
jquerycss
Niebieski
Niebieski

Reputation: 609

transparent css border as a place-holder

Please take a look at the following two fiddle files to see the problem I am struggling with:

I want a border on the hover effect for highlighting, but I am not satisfied with the two following codes I have:

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

This one is not satisfactory because the table wobbles as you mouse-over the rows, then I tried the following

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

this does not work either, because the border is overlapped by the 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 for the rows that is not hovered by the mouse, if I set the border to be none, then it wobbles, but if I set the border to be solid but transparent, it still blocks the border of hovered rows.

Is there a way to have a truly invisible place-holder border?

Upvotes: 0

Views: 71

Answers (1)

AndrewL64
AndrewL64

Reputation: 16311

Here you go: http://jsfiddle.net/AndrewL32/hnxan9ck/8/

Just use outline instead of border to add the border color and it 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;
}

Upvotes: 2

Related Questions