jQuery - 1つのカードが握られたりフォーカスがあったりすると、他のものをぼかす

Question

jqueryを使用しようとしているので、divやコンテンツにカーソルを置いたりフォーカスを合わせたりすると、同じクラスの他のdivはぼやけます）。

そして、マウスが出たとき、またはフォーカスが失われたときに、すべてがぼやけていないはずです。

HTMLは、この（簡体字）のようになります。

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

私はすべてのアイデアを感謝しています。あなたはnがpxユニットを示す位置番号であるblur(npx)にホバー要素の兄弟のclassName、cssfilterセットを切り替えるには、.siblings()、.toggleClass()を使用することができますあなたの

Answer 1

をありがとうございます。

$(".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>

あなたは、コンテナ要素内.card要素を配置することができる唯一のcss使用するには、セレクタ.container .card:not(:hover)を使用してfilter:blur(0px)に設定されたコンテナ要素cssは、脇を支援するのと同じように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>