追従バナー画像のついているリンクの範囲がずれている件

前提

ここに質問の内容を詳しく書いてください。

shopifyを使って、ECサイトを構築したのですが、
サイト内の右下に追従バナーを５つ貼っています。
リンクの範囲が一番左の画像を除き、他の４枚は画像にカーソルに合わせてもリンクとして認識されません。
画像の右下部分をホバーするとリンクとして認識しているようです。
リンクの範囲がずれているように思います。

実現したいこと

画像の隅ではなく、真ん中部分を普通にホバーしてリンクとして認識するよう、リンクの範囲を調整したい。

発生している問題・エラーメッセージ

該当のソースコード

https://shopease.sonosakinin.com/

こちらのサイトの右下に出ているグレー正方形の５枚画像です

<div class="floating-banar">
<div class="floating-kazaru"><a href="#"><img class="pc" src="https://sonosakinin.com/wp-content/uploads/2022/06/kazaru.png"></a></div>
<div class="floating-atsumeru"><a href="#"><img class="pc" src="https://sonosakinin.com/wp-content/uploads/2022/06/atsumeru.png"></a></div>
<div class="floating-tsukau"><a href="#"><img class="pc" src="https://sonosakinin.com/wp-content/uploads/2022/06/tsukau.png"></a></div>
<div class="floating-tsukeru"><a href="#"><img class="pc" src="https://sonosakinin.com/wp-content/uploads/2022/06/tsukeru.png"></a></div>
<div class="floating-tsukuru"><a href="#"><img class="pc" src="https://sonosakinin.com/wp-content/uploads/2022/06/tsukuru.png"></a></div>
</div>

試したこと

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

ベストアンサー

原因は、aリンクの親要素のサイズが、100px × 50pxになっており、となりのaリンクを覆っているからです。

検証ツールの結果のスクリーンショット↓

なぜ、幅が100pxになるかというと、下記のようにimg要素の幅を50% としているため、画像のオリジナルサイズの100pxの領域を確保したまま、画像の表示サイズが半分に縮小されているからだと思われます。

css
1img.pc {
2    width: 50%;
3}

これを%ではなくpxで設定すれば親の幅も50pxになるので、他のリンクを覆い隠すことはなくなります。

css
1img.pc {
2    width: 50px;
3}

現状のコードはバナーアイテムを一つずつposition: fixed;でレイアウトしていたりとかいろいろ無駄が多いので、
.floating-banarをfixedで配置して、アイテムはflexで横並びさせれば、シンプルなコードで記述できます。
コード例を提示しておきますので、よろしかったらご参考に。

css
1.floating-banar {
2  display: flex;
3  gap: 10px;
4  position: fixed;
5  right: 50px;
6  bottom: 5px;
7}
8.floating-banar > div {
9  width: 50px
10}
11
12img.pc {
13  width: 100%;
14}