How to make background image blur on link hover?

Question

I\'d like to make my background image blur for let\'s say 5px when you hover the link with a mouse cursor. Is there any simple way to make this happen? I got a bit entangled wit

Answer 1

#pic a:hover  {  
    background: url(<-- insert blurred image here -->);
}` 

This is the easiest way to create the effect you are looking for. As I'm sure you know, the issue is one of scope. You cannot (to my knowledge) set the background of a parent element from a child element without a JS workaround.