CSSでの蛍光ペン効果を画像リンクに対しては無効化したいです。

Question

こんにちは、色々とサイトをめぐって調べたのですが、どうしても解決への道が見つからないのでお願いします。

問題は、蛍光ペン効果というイメージのリンクの下線 (Hover 時) についてですが、
文字列にはうまく機能しますが、画像だけのリンクだけは下にくっつく余計な蛍光ペン効果を消し去りたいのです。

-HTML-

<a href="xxxx/index.htm"><span><img class="banner" src="xxxx/banner/6.gif" title="xxxxxxxx"></span></a>
(span は何に利用しているか過去のことなので判断できませんでした)

-CSS-

a { transition: 0.2s; font-weight: normal; text-decoration: underline solid 2px; text-underline-offset: 1px; }
a:link { color: #7293d8; text-shadow: 0px 0px 2px #cfdbf4; }
a:visited { color: #7293d8; text-shadow: 0px 0px 2px #cfdbf4; }
a:active { color: #7293d8; text-shadow: 0px 0px 2px #cfdbf4; }
a:hover { color: #4b618e; text-shadow: 0px 0px 2px #b9c5db; background: linear-gradient(transparent 40%, #cddcff 0%);}

img.banner,img.banner2 {transition : 0.2s; width:100%;padding:0px 0px 10px 0px;}

img:hover.banner,img:hover.banner2,img:hover.banner3{
transform: translate(0px,-5px);
transition: 0.2s;ease-in-out;background-color: transparent
}

何をしても、お手上げ状態です。
助けてください、よろしくお願いします…

足りない情報がありましたら、追記しますので、お願いします。

Answer 1

JavaScriptで解決しちゃいましょうか。
下記コードを</body>の前に置いてみてください。

<script>
  const elements = document.querySelectorAll('a');
  for (const el of elements) {
    const banner = el.querySelector('.banner');
    if (banner) {
      el.style.backgroundImage = 'none';
    }
  }
</script>

Comments

[Noripyon]

すみません !
この JavaScript は、どの変数を変えると、他の画像にも応用できますでしょうか !?
問題がこの JavaScript で一部 (banner) 解決しました !
他の部分とは、banner2 などです… !

[itagagaki]

とにかくすべての画像リンクから蛍光ペン効果を除いていいのなら
const banner = el.querySelector('.banner');
を
const banner = el.querySelector('img');
にすれば良いです。

[Noripyon]

できました !
ほぼ望みどおりでした ! ありがとうございます !
CSS だけでは難しいのでしょうか ^ ^;

[itagagaki]

将来のCSS4には :has() というのが加わって、それでできるようになるかもですが、今はまだ確かSafariしか対応していないはずです。

Answer 2

以下ではダメでしょうか？

img:hover.banner,img:hover.banner2,img:hover.banner3{
transform: translate(0px,-5px);
transition: 0.2s;ease-in-out;background-color: transparent
}

↓

img:hover.banner,img:hover.banner2,img:hover.banner3{
transform: translate(0px,0px);
transition: 0.2s;ease-in-out;background-color: #fff;
vertical-align: bottom; 
}

Answer 3

一つの解決策

<a href="xxxx/index.htm"><span class="deco">text</span></a>
<a href="xxxx/index.htm"><span><img class="banner" src="xxxx/banner/6.gif" title="xxxxxxxx"></span></a>

a:hover .deco {
  color: #4b618e;
  text-shadow: 0px 0px 2px #b9c5db;
  background-image: linear-gradient(transparent 40%, #cddcff 0%);
}

Comments

[Noripyon]

これは、リンクテキストに class で蛍光ペン効果を指定して、リンク画像だけはそのままただリンクを貼るだけ、ということに解釈してもよいでしょうか ?
画像への蛍光ペン効果だけを無効化することは存在しないのでしょうか…
テキストを修正するとなると、作業が膨大になるので、できれば画像へのリンクだけ蛍光ペン効果を無効化をしたいのですが…

Answer 4

以下のようにするとどうでしょうか。

        img.banner,
        img.banner2 {
            display: block;
        }

Comments

[Noripyon]

返信ありがとうございます。一瞬うまくいったかなと思いましたが…
これを指定すると、ガクガクになってしまいました。
マウスカーソルをあてると、上下にガクガクと揺れたりします。

.k_banner {text-align: justify; }
これを利用しているので、5個ある画像 (banner、すべて同じサイズ) を両端ぞろえにしているのです…

[Lhankor_Mhy]

ご提示のコードには .k_banner という要素がないですが、このコードの外側とかにある感じですかね？

[Noripyon]

外側… でしょうか、そういえます。
.k.banner で 5つの banner をまとめてあります。1つ1つの banner は表示サイズはレスポンシブなので可変します。横に 2つです。
あるサイズまで横幅が狭くなると、banner は横幅 100% になり、縦一直線にならびます。
説明が下手ですみません…

[Noripyon]

何度も返信しすみません…

□□
□□
□

↑こんな感じです、横に2つというのは .k_banner という指定で均等割り当てされて中央に余白があり、左右余白無しで揃えています。改行などで横に 2つにはしていません。
ある程度狭めると、レスポンシブで縦に並びます。(5個)

[Lhankor_Mhy]

.k_banner でラップして .k_banner {text-align: justify; } としてみましたが、「ガクガクになってしまいました」という問題が再現しませんでした。

また、ご提示のコードでは、
□□
□□
□
になりませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[Noripyon]

ここは、私の個人運営のサイトを掲載してもよいのでしょうか ?
問題の再現 (の手順) の説明が難しくて、URL を載せてしまった方が早いかなと思いましたが…

[Noripyon]

https://n-slow-life.sakura.ne.jp/main_PC.htm
一時的に蛍光ペン効果を付け足した再現されるほうをアップロードしました。
どうしようもなくなったら、元に戻します…

[Noripyon]

https://n-slow-life.sakura.ne.jp/css/norippy_style_white.css です。
どのような処理がどの行でされているかは説明できます。

[Lhankor_Mhy]

これでしたら、単純に、

.k_banner a{ background:none; }

でいいのでは？

[Noripyon]

指摘いただいたところを変えてみたのですが、画像の下に、蛍光ペンが残ってました…