4

I'm trying to make it so when you hover over a list item the current li pops out and all other list items fade out or blur out slightly. I would prefer all css, would anyone know how to select all the other li's except for current selected in css?

UPDATE
I dont believe this is possible to do in css therefore i'm trying to select it in jquery.

Heres the updated code with my not working jquery script http://jsfiddle.net/xKEHe/42/

reference Hide all but $(this) via :not in jQuery selector

Community
  • 1
  • 1
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

1 Answers1

6

You can write like this:

ul:hover > #blah a{
    opacity:0.5;
    text-shadow: 0 0 2px #CACACA;
}
ul > #blah:hover a{
    color:#222;
    opacity:1;
    text-shadow:none;
}

​

Check this: http://jsfiddle.net/xKEHe/46/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    `opacity: 0.5` makes the other list items 50% transparent. The added text-shadow adds the "blur" effect because now the font is not sharply displayed. Adjusting the shadow color can even enhance that effect (e.g. try to set it to the same as font-color). – Paul May 09 '12 at 06:44
  • 1
    The first :hover said when hover over UL then decrease the opacity of all his child LI's & after that when you :hover over single LI then the opacity of that LI increase. – sandeep May 09 '12 at 06:47
  • wow, sweet. Nice to have a non-jquery solution for this. So simple and elegant. Thanks. – Danny Englander May 20 '13 at 12:46