ホバー時に複数の要素にホバーアクションを適用させたい

Question

    <div id="a">
     <a href="#" class="b"><img src="1.png" alt="" /></a>
     <a href="#" class="b"><img src="2.png" alt="" /></a>
     <a href="#" class="b"><img src="3.png" alt="" /></a>
     <a href="#" class="b"><img src="4.png" alt="" /></a>
    </div>

.b{
 float:left;
 display:block;
 cursor:pointer;
 transform:scale(1);
}
.b img{
 height:140px;
 width:140px;
 border-radius:50%;
 margin-right:160px;
}
.b:nth-child(1):hover + .b:nth-child(2),.b:nth-child(3),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(2):hover + .b:nth-child(1),.b:nth-child(3),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(3):hover + .b:nth-child(2),.b:nth-child(1),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(4):hover + .b:nth-child(2),.b:nth-child(3),.b:nth-child(1){
 transform:scale(0.5);
}

【やりたいこと】
bのnth-child(1)にホバーした時に他のb[nth-child(2～4)]のscaleを1倍から0.5倍に変更したい。
それを各b:nth-child(1～4)に適用させたい。
なのでホバーしたb以外のbを1倍から0.5倍になるようにしたい。

【困ったいること】
上記のcssを書きましたがホバーしても他のbが小さくなりませんでした。

【試したこと】
cssの複数要素を書く場合,で区切って書きますが、調べた時にnth-childの複数要素を書く場合は
,ではなく対象要素に対してb:nth-child(2):nth-child(3):nth-child(4)のように繋げて書くと
でてきたので試してみましたができませんでした。
ちなみに1つの要素の場合はホバーアクションを適用できましたが複数はできませんでした。

Answer 1

下記のようにしてみてください。
#containerのホバー時に、ホバーしていない<a>要素を指定する感じです。
こちらでしたら要素数が増えてもcssも併せて変更する必要がありません。

    <!-- aと被るのでidを変更-->
    <div id="container">
     <a href="#" class="b"><img src="1.png" alt="" /></a>
     <a href="#" class="b"><img src="2.png" alt="" /></a>
     <a href="#" class="b"><img src="3.png" alt="" /></a>
     <a href="#" class="b"><img src="4.png" alt="" /></a>
    </div>

#container:hover a:not(:hover) {
 transform: scale(0.5);
}

/* 下記は不要なので削除
.b:nth-child(1):hover + .b:nth-child(2),.b:nth-child(3),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(2):hover + .b:nth-child(1),.b:nth-child(3),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(3):hover + .b:nth-child(2),.b:nth-child(1),.b:nth-child(4){
 transform:scale(0.5);
}
.b:nth-child(4):hover + .b:nth-child(2),.b:nth-child(3),.b:nth-child(1){
 transform:scale(0.5);
}
*/

サンプル

Comments

[hiroki88]

教えていただいたことを試しましたら上手く動作することができました!
初めてみる書き方でもしよろしければa:not(:hover)の部分がどのような意味か
教えていただいてもよろしいでしょうか?

[runny_nose]

https://developer.mozilla.org/ja/docs/Web/CSS/:not
詳細は↑が詳しいのですが、
not:()のかっこの部分で指定したセレクタに一致しないものが選択されるようになります。
#container:hover a:not(:hover)とした場合、
「ホバー状態の#container配下の<a>タグ要素の内、ホバー状態ではないもの」という意味となります

[hiroki88]

なるほどです。とてもわかりやすく教えて頂きありがとうございました!

[runny_nose]

また、蛇足ですが、
.b {
float: left;
display: block;
cursor: pointer;
transform: scale(1);
transition: 0.3s;
}

.b img {
height: 140px;
width: 140px;
border-radius: 50%;
margin-right: 160px;
}

#container:hover .b:not(:hover) {
transform: scale(0.5);
}
のようにtransitionを設定すると、動きがなめらかになってよりよいと思いました

[hiroki88]

ありがとうございます。
ぜひ試してみます!