css hover over li, blur all others

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <l开发者_Python百科i>d</li>
  <li>e</li>
</ul>

Can anyone tell me if it's possible to use css to blur the ul elements containing a,d,e when the user moves their mouse over the element containing c, without using JavaScript?

Do you mean something like this:

http://jsfiddle.net/S4TMS/

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

CSS

ul li {
    background-color: red;
    margin: 2px;
}

ul:hover li {
    opacity: .5;
}

ul li:hover {
    opacity: 1;
}

As opposed to using multiple selectors, you can combine them into one using the :not selector.

ul:hover li:not(:hover) {
    opacity: .5;
}

Which will set opacity:.5 on all the li, exept the one being hovered over.

jsFiddle here

Here is a great example of what your after. That code sample demonstrates how to blur everything but the hover element.

You could try something like this, which is not supported in all browsers due to the text-shadow attribute:

ul:hover li {
    text-shadow: 0px 0px 3px black;
    color: transparent;
}

ul:hover li:hover {
    text-shadow: none;
    color: black;
}

EDIT: Added a link to a jsfiddle above, since that's apparently the cool thing that gets you votes. :P