忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

リンク画像のホバー時にでる背景色を消す方法

リンク文字は下線を付けたり、マウスが乗った時に動くようにしたり、背景色を付けたりと、いろいろ装飾することができます。
リンクに下線がついているとリンク画像にも下線が出てしまったりしますが、こういう問題はあちこちで指定の仕方が書かれているので、ちょっと検索するだけで解決します。

しかし、リンク画像のホバー時の背景色を消す方法はどこにも書いてありませんでした。
これは、リンクにマウスが乗った時に背景色が出るように指定していると、リンク画像にもマウスオーバーで背景色が出てしまうという問題です。
そこで今回は、この問題の解決策をご紹介します。

リンクと画像の基本指定は下の通りです。
/* リンクの基本設定 
------------------------------------------------*/
a { text-decoration: none; }

/* 通常のリンク */
a:link { color: #BB5282; }

/* 訪問したリンク */
a:visited { color: #BB5282; }

/* マウスが乗ったときのリンク */
a:hover { background-color: #FCE1ED; }

/* マウスをクリックしたときのリンク */
a:active { color: #D1272F; }

/* 画像の基本指定 
-----------------------------------------------*/
img {
	margin: 2px;
	border: none;
}
一番上で、リンクに下線が出ないように指定しています。
ホバー時に背景色が出る指定ですが、これはリンク文字とリンク画像両方に継承されるので、このままだとリンク画像にマウスが乗った時にマージンの部分に背景色が出てしまします。

そこで、画像の外余白のmarginを内余白のpaddingに変更し、上の指定にbackground-color: transparent;を加えて背景色を透明にしてみましたが、背景色は見えたまま。
それならと、背景色をブロックの背景色と同じ白色にしてみると余白部分はバックと同じ色になったのですが、他の問題が出てきました。

なぜかIE6とIE7は背景色の指定だけでOKになったのですが、他のブラウザだと画像の下に背景色が線のように見えてしまうんですねえ。
そこで、モダンブラウザだけ画像を下のほうに動かしてみました。
が、IE8だけまだ下に移動しないといけないようだったので、IE8だけ別指定で画像をもっと下に動かしました。
img {
	padding: 2px;
	border: none;
}

a img:hover { background-color: #FFF; }

/* IE6 */
* html a img { background-color: #FFF; }

/* Firefox, Opera, Google Chrome, Safari */
html>/**/body a img { vertical-align: text-bottom; }

/* IE8 */
html>/**/body a img { vertical-align /*\**/: bottom\9; }
ここで気を付けないといけないのは、IE6とIE7では画像にvertical-align を指定しないこと。IE6とIE7には画像の回り込みバグがあるので、画像がどんな配置になるかわからないブログのテンプレートには指定してはいけないんですね。

さて、背景色をブロックの背景と合わせ、画像の位置をずらすことで、リンク画像にマウスが乗ってもリンク文字に指定した背景色が現れなくなりましたが、自分のブログで実験しているときにおかしなことに気が付きました。
マウスを画像に載せたときに、背景色が出ないものと出るものが出てきたんです。

不思議に思ってソースを確かめると、背景色が出ない画像と背景色が出る画像の書き方に違いがあるのに気が付きました。
/* 背景色が出ない画像 */
<a href="#"><img alt="" src="/abc.jpg" /></a>

/* 背景色の出る画像 */
<a href="#">
<img alt="" src="/abc.jpg" />
</a>
HTMLを行に分けて書くと、aタグとimgタグの間に半角のスペースができるのが原因のようです。これは自分で調整できるからいいとして、もう一つ頭を悩ませた問題があります。
ブログのプラグインとして出てくる、携帯用のバーコードです。

他の画像は上の指定ですべてOKになったのですが、ユーザー側では変更がまったくできないバーコードには、しっかりと背景色がついてしまう。
そこでバーコードの余白を内外ともなくしたところ、IE6とIE7以外は背景色がなくなりました。
最後まで背景色が見えてしまうIE6とIE7は、仕方ないのでごり押しすることにしました。
下は、忍者ブログのプラグインに入っているバーコード用の指定です。
div.qrcode_image a img {
	margin: 0;
	padding: 0;
}

/* IE6 */
* html div.qrcode_image a:hover img {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}
	
/* IE7 */
*:first-child+html div.qrcode_image img:hover {
	margin-right: -4px;
	margin-bottom: -3px;
	padding-right: 4px;
	padding-bottom: 3px;
}
IE6とIE7でバーコードの背景色を消すために無理やりな指定をしてますが、一応きれいに消えてくれました。
向こうから勝手に出てくる画像は苦労しますね。
RC版が公開されたIE9で問題が出ないように祈ろう!

拍手[6回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

03 2017/04 05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]