質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

Noripyon
Noripyon

総合スコア10

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

4回答

0評価

2クリップ

191閲覧

投稿2022/05/21 01:57

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

問題は、蛍光ペン効果というイメージのリンクの下線 (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
}

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。