CSS以外のものはすべてぼかしました

Question

私は3つの「カード」、3つの別々のdivを持っています。私は "カード"の上にマウスを置くと、他の2つはぼやけてしまいます。

Here's a codepen example: https://codepen.io/jacobkjones/pen/gXqpeB 

私がボケを行う方法を知っているが、私はBOX1上にカーソルを移動するたびにBOX2とBOX3がぼやけますどこにそれを作る方法がわかりません。私はこれが単なるCSSで可能かどうかも分かりませんが、私はJSなしでやりたいと思っています。

〜+などの複数のCSSセレクタを使用しようとしましたが、目的の結果が得られませんでした。

ご迷惑をおかけして申し訳ありません。

Answer 1

あなたはCSSだけでこれを取り除くことはできません。それはthere's no previous sibling selector in CSSです。

だから、このマークアップを与えられた：

div[id^="box"]:hover ~ div[id^="box"] { 
    //blurry stuff 
} 

しかし、あなたが#box2または#box3を置くと何が起こる：このようなセレクタで#box1をホバリングするときには、#box2と#box3を選択することができ

<div class="container"> 
    <div id="box1" class="card"> 
    <h1>one</h1> 
    <p>some text here</p> 
    </div> 
    <div id="box2" class="card"> 
    <h1>two</h1> 
    <p>some text here</p></div> 
    <div id="box3" class="card"> 
    <h1>three</h1> 
    <p>some text here</p></div> 
</div> 

？カーソルを移動する前にボックスを変更することはできません。

デフォルトでは後方を考えてぼかしを入れて、単純な:hoverセレクタを実行して、ホバリングしているものをぼかすことができます。そうすれば、ホバリングしていないもので終わることがありますが、ホバリングしていないときにボックスが正常に見えないので、あなたが望むものではありません。

ここでは、jQueryの.not()を使用して動作するアプローチの簡単な例を示します。必要に応じて、CSSを関数に入れるのではなく、クラスを切り替えてぼかしを行うことができます。

$(function(){ 
 
    var boxes = $('div[id^="box"]'); 
 
    $(boxes).on('mouseenter', function(){ 
 
    $(boxes).not($(this)).css('background-color', 'red'); 
 
    }).on('mouseleave', function(){ 
 
    $(boxes).css('background-color', 'initial'); 
 
    });; 
 
});

.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
} 
 
.card { 
 
    border: solid black 1px; 
 
    padding: 20px; 
 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
} 
 
body { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="box1" class="card"> 
 
    <h1>one</h1> 
 
    <p>some text here</p> 
 
    </div> 
 
    <div id="box2" class="card"> 
 
    <h1>two</h1> 
 
    <p>some text here</p></div> 
 
    <div id="box3" class="card"> 
 
    <h1>three</h1> 
 
    <p>some text here</p></div> 
 
</div>

---

最後の注意：お使いのヘッダータグを修正してください。ヘッダー2と3の場合、開始タグは<h1>ですが、終了タグは</h2>です。