I've created a menu with a special CSS effect that blurs each item on hover:
{<style>
a.blur
{
text-decoration: none;
color: #128;
}
a.blur:hover, a.blur:focus
{
text-decoration: underline;
color: #933;
}
.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 100ms ease 50ms;
-moz-transition: 100ms ease 50ms;
transition: 100ms ease 50ms;
}
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
text-shadow: 0 0 4px #989898;
font-size:24px;
}
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
text-shadow: 0 0 0 #000;
}
</style>}
Now, when you hover over an item, it becomes blurred. My question is, is there a way to make all other items blur when one is hovered over? I don't want all the items to be blurred initially, just when they are not the focus. When an item is no longer being hovered, all should return to their normal state.
Thank you!