人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについて質問です。画像にa要素を指定してマウスオーバーでボーダー色が変わるCSSなんですが、IE5の場合、ボーダーの線幅自体がクリックできる範囲になってしまい。普通に画像はクリック範囲から外れてしまうんです。CSS は以下です
#somenale a{
border: 1px solid #B2B2B2;
display: block;
width: 120px;
height: 80px;
}
#somenale a:visited{
border: 1px solid #B2B2B2;
}
#somenale a:hover{
border: 1px solid #CC9933;
}
どなたか詳しい方教えてください。

●質問者: moriamko44728
●カテゴリ:ウェブ制作
✍キーワード::hover :visited border CSS クリック
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ginpei
●50ポイント

ちょっと質問がよくわかりません。

#somenale というのは、何にかかる ID でしょうか? IMG 要素に対するスタイルの指定もないようですが……。


単純にリンク画像の枠の色を変更する場合のサンプルです:

<style>

a img {

border: 1px solid #B2B2B2;

}

a:hover img {

border: 1px solid #CC9933;

}

</style>


<a href=”#”><img src=”img.gif”></a>


これであれば画像がクリック範囲から外れる事はありませんが、「ボーダーの線幅自体がクリックできる範囲になってしまい」ます。

枠をクリック範囲には含めずに色を変えようとすると、現在ではスクリプトで実装するしかなさそうです(:hover などは今のところリンクにしか使えないので):


<span style=”border: 5px solid #0000ff;” onMouseOver=’this.style.borderColor=”#ff0000”;’ onMouseOut=’this.style.borderColor=”#0000ff”;’><a href=”#”><img src=”hoge.gif”></a></span>

◎質問者からの返答

質問の内容が足りなかったみたいですね。すいません。でも内容は判って頂いてますね。ありがとうございます。そうですね。img要素に定義すればいいんですよね。試して見るとうまく行きました。ありがとうございます。助かりました!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ