html - Change Top And Bottom Border of a Vertical List on Hover -
i decided on effect vertical drop down list. basically, each list element separated 1px grey bar. effect easy, apply bottom-border: solid 1px black;
on hover, want top , bottom borders of selected item become white. unfortunately, setting top , bottom borders on list item element, not change bottom border of list item above , end top border staying black , bottom border becoming white.
is there css way achieve effect?
the desired effect shown here:
this perfect use of nonexistent previous-sibling selector. unfortunately, being nonexistent @ all, i'd take different approach. if can change border on top, next-sibling selector work perfectly:
ul > li:hover, ul > li:hover + li { border-top: 1px solid white; }
demo: http://jsfiddle.net/mattball/znr94/
Comments
Post a Comment