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:
menu

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/

enter image description here


Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -