jQuery - When one card is hovered or has focus, blur the other

Question

I am trying to use jquery so when a div and/or it's contents are hovered or has focus, the other div's with the same class will be blurred (css3).

And then on mouse out or lost focus, all should be unblurred.

The html looks like this (simplified):

<div class="card"><input type="text"></div>
<div class="card"><input type="text"></div>
<div class="card"><input type="text"></div>

I appreciate any ideas. Thank you

Answer 1

You can use .siblings() , .toggleClass() to toggle className of siblings of hovered element, css filter set to blur(npx) where n is position number representing px unit.

 $(".card").hover(function() { $(this).siblings().toggleClass("hover") }) 

 .card.hover { -webkit-filter: blur(1px); -moz-filter: blur(1px); filter: blur(1px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"><input type="text">card</div> <div class="card"><input type="text">card</div> <div class="card"><input type="text">card</div> 

To use only css you can place .card elements within a container element; set container element css to filter:blur(0px) using selector .container .card:not(:hover) , set .container:hover .card:not(:hover) selector to filter:blur(npx)

 .container:hover .card:not(:hover) { -webkit-filter: blur(1px); -moz-filter: blur(1px); filter: blur(1px); } 

 <div class="container"> <div class="card"><input type="text">card</div> <div class="card"><input type="text">card</div> <div class="card"><input type="text">card</div> </div>