CODEWITHSUNDEEP
javascriptcssblur
user3424570
user3424570

Reputation: 3

blur on no-hover items

I need a bit help with blur efect :D I have the follow:

<header>
            <div>Home</div>
            <div>Menu</div>
            <div>Settings</div>
            <div class="men">Account</div>
</header>

and the CSS:

header > div:hover{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);

    color:#000;
    background-color:#FFF;
    height:120%;
}

If I'm hover a div it will use the blur effect, but... How can I do for add the blur effect on No-hover items?? I want all items with blur exept the hover. I guess that I will need javascript for this right?

Thanks all :D

Upvotes: 0

Views: 197

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Using CSS only you can achieve this.

 header > div:hover{
color:#000;
background-color:#FFF;
height:120%;
}
header > div:hover ~ div{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);

color:#000;
background-color:#FFF;
height:120%;
}

EDIT:

The above will work only for next siblings element. Here is the complete solution for you scenario.

  header:hover > div{
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);

    color:#000;
   background-color:#FFF;
    height:120%;
   }
  header > div:hover{
  color:#000;
  background-color:#FFF;
  height:120%;
 -webkit-filter: blur(0px);
 -moz-filter: blur(0px);
 -o-filter: blur(0px);
 -ms-filter: blur(0px);
 filter: blur(0px);

 }

DEMO

Upvotes: 3

user2391174
user2391174

Reputation: 138

Indeed, you can't do this in CSS. If you're using javascript, you can archive this with the mouseenter and mouseleave event.

Upvotes: 0

Related Questions