Css Hover Over Li, Blur All Others

• a
• b
• c
• d
• e

Can anyone tell me if it's poss

Solution 1:

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

ulli {
    background-color: red;
    margin: 2px;
}

ul:hoverli {
    opacity: .5;
}

ulli:hover {
    opacity: 1;
}

Solution 2:

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

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

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

jsFiddle here

Solution 3:

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

Solution 4:

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

ul:hoverli {
    text-shadow: 0px0px3px black;
    color: transparent;
}

ul:hoverli: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