0

I decided on an effect I would like for a vertical drop down list. Basically, each list element is separated by a 1px grey bar. This effect is easy, apply bottom-border: solid 1px black;

On hover, I want the top and bottom borders of the selected item to become white. Unfortunately, setting the top and bottom borders on the list item element, does not change the bottom border of the list item above it and I end up with the top border staying black and the bottom border becoming white.

Is there a css only way to achieve this effect?

The desired effect is shown here:
menu

SharpBarb
  • 1,590
  • 3
  • 16
  • 40

2 Answers2

4

This would be a perfect use of the nonexistent previous-sibling selector. Unfortunately, it being nonexistent at all, I'd take a different approach. If you can change the border to be on top, the next-sibling selector will work perfectly:

ul > li:hover, ul > li:hover + li {
    border-top: 1px solid white;
}

Demo: http://jsfiddle.net/mattball/ZNR94/

enter image description here

Community
  • 1
  • 1
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
-1

there is apparently looking at a CSS selector to the elements prior siblings, only for the following, look at this example:

<html>
<head>
    <title></title>
</head>
<style type="text/css">
ul {
    list-style: none;
    width: 50%;
    margin: 50px auto;
}
li {
    background: #ccc;
    border-bottom: 1px solid #000;
    height; 20px;
}
li:hover + li, li:hover  {
    border-bottom: 1px solid #FFF;  
}
</style>
<body>

<ul>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>
<p></p>
</body>
</html>

so it is difficult only with css

rkmax
  • 17,633
  • 23
  • 91
  • 176
  • This doesn't work correctly. The wrong pair of borders change color. http://jsfiddle.net/mattball/hh5x9/ -1 – Matt Ball Oct 07 '11 at 01:17