- ベストアンサー
CSSでのマウスオーバー効果
質問させて下さい。 サイト上でバナーやテキストに（もしくは並んだバナーとテキスト 両方に）リンクを張っている状態です。 マウスオーバー時に画像とテキストどちらも少し大きく表示される ように下記のようにCSSのコードを想像して書きました。 ------------------------------------------ 略 a:hover { color:#333333; } a:hover img {width:110% ; height:110%;} a:hover font {font-size: 120%;} 略 ------------------------------------------ すると不具合がいくつかあり、お力を貸して欲しいです。 （１）テキスト単独のリンクに関しては、全く動作しない ようです・・・。ただ、バナーとテキスト両方まとめて <a>～</a>で囲った場合は一部の場所のみ？動作するみ たいです。 （２）画像の効果はファイヤーフォックスでは希望通り動作し ますが、ＩＥだと全く反応しません・・・。 何か簡単な解決方法はないでしょうか？ よろしくお願い致します。 （画像を複数用意してJava等でロールオーバーの設定をさせる等は 手間も掛かりますし、コードも多くなるのでなるべくしたくあり ません。このCSSの記述の変更でどうにかならないでしょうか）
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと時間が取れたので、お試しを ソースを見ての印象 ★内容的に表ではないのを表でマークアップされている。 ★<br />を複数並べて整形されている。・・・・・これダメです。ブラウザによると無視されます。 ★borderのようなプレゼンテーションに関わる属性が記述されている。 プレゼンテーションに関わるものはスタイルシートで ★そこで、web標準にとりあえず書き直してからCSSを編集してみました。 以下をすべテキストエディタにコピーペーストし、UTF-8で保存してブラウザで確認すること、UTF-8が使えないときは、下記ソースのUTF-8の部分をShift_JISに変更してShift_JISで保存しても良い。 sample.html＿＿＿＿＿＿＿＿＿＿＿＿＿＿以下のすべて <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> a img { border: none; } dl.Alubam{ display:block; padding: 0.5em 0.5em 0.5em 2em; background-color: rgb(204,51,51); color:inherit; width: 20%; } dl.Alubam>dt { display: block; position: relative; } dl.Alubam>dd { display: list-item; padding: 0px; list-style: disc outside; } dl.Alubam>dd+dt{ margin-top: 40px; } dl.Alubam dt a img.Zoom1{ display: block; position: absolute; width: 1px; height: 1px; top: 0; left: 0; } dl.Alubam dt a img.Zoom2{ display: block; position: absolute; width: 1px; height: 1px; top: 0; left: 0; } dl.Alubam dt a, dl.Alubam dt a:visited{ display: block; width: 100px; top: 0; left: 0; } dl.Alubam>dt a:visited{ background-color: rgb(204,51,51); } dl.Alubam>dt a:hover img.Zoom1{ position: absolute; top: 0; left: 0; width: 71px; height: 37px; } dl.Alubam>dt a:hover img.Zoom2{ position: absolute; top: 0; left: 0; width: 139px; height: 24px; } </style> <title>タイトル</title> </head> <body> <h1>タイトル</h1> <div class="abstract" id="abstract"> <h2>概要</h2> <p>最初にページ全体の要約をまとめておくと良い</p> </div> <dl class="Alubam"> <dt><a href="http://www.goo.ne.jp/"><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" alt="教えてgoo" width="36" height="19" /><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" alt="教えてgoo" width="71" height="37" class="Zoom1" /></a></dt> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dt><a href="http://oshiete.goo.ne.jp/"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="おしえてgoo" width="70" height="12" /><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="おしえてgoo" width="139" height="24" class="Zoom2" /></a></dt> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> <dd><a href="#">テキストテキスト</a></dd> </dl> </body> </html>
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
はは、失礼。 ＞a:hover img {width:110% ; height:110%;} だと ＞Aの画像だけオーバー時に縦300ピクセルぐらいにびよ～んと伸びたり・・・ そうなりますわ。 そもそもwidthは親要素に対する割合ですからね。 設定するなら、width: 80px;とかでなきゃ・・・ 他にも一杯おかしなところがあるので、HTMLのソースをもう少し具体的に示してください。 そのリンクを含むブロック要素ごと
補足
なるほど。。。親要素に対する割合・・・難しいですが 動かない理由はわかりました。 a:hover img {width:110% ;} とすると確かにきちんと動作しました！ 縦も延ばすのはむずかしいでしょうか；； 多いですが、ソース貼り付けときます↓ この状態で、縦まで指定すると、画像が２つともびよ～んと伸びちゃいます。 <table width="230" height="700" border="0" cellpadding="1" cellspacing="0" bgcolor="#ffffff"> <tr> <td height="700" valign="top" bgcolor="#cc3333"> <a href="http://○○○"><img src="○○○.gif" alt="○○○" width="250" height="40" border="0" /></a><br /> <font size="2"> ・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a></font><br /> <br /> <br /> <br /> <a href="http://○○○"><img src="○○○.gif" alt="○○○" width="220" height="35" border="0" /></a><br /> <font size="2">・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://i○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a><br /> ・<a href="http://○○○">テキストテキスト</a></font></td> </tr> </table>
そうですね・・・ 今わかる範囲内ではあまり関係なさそうなところで、brはいらないような気がするくらいです。 %はaタグの回りのソースの影響が大きいので、実際にそこを見てみないとわからないですね。 firefoxでは期待通りの動作ですか？
widthとheightを110%で記述しているため大きくなりすぎるのではないですか？ %は自身の大きさを100%とするのではなく、そのタグを囲んでいる親要素の幅や高さを100%として計算します。
補足
お答えありがとうございます。 ずっとソースを睨んでるのですが不明です。。。 例えばバナーが２つあって 一つ目↓ ------------------------------------------ <a href="http://○○○"><img src="○○.gif" alt="○○" width="150" height="30" border="0" /><br /> 画像1へのリンク</a> ------------------------------------------ 二つ目↓ ------------------------------------------ <a href="http://○○○"><img src="○○.gif" alt="○○" width="150" height="30" border="0" /><br /> 画像1へのリンク</a> ------------------------------------------ と、同じとしか思えない構造なのに、Aの画像だけオーバー時に 縦300ピクセルぐらいにびよ～んと伸びたり・・・明らかに おかしい表示なんです。。。（上のソースも○以外は実際の ソースからコピーしてきました） ん～、、ムズカシイ；；
- ttkai00
- ベストアンサー率58% (18/31)
font-size: 120% は a:hover font に指定してあるので、そもそも font タグがない部分には効果ありませんよね。color:#333333; の方はどちらでも効きそうですが。 <a href="…"><font>あいうえお</font></a> なら大きくなりますが、 <a href="…">あいうえお</a> なら大きくならないのだと思います。以下のように書けばよいと思いますが。 a:hover { color:#333333; font-size: 120%; } a:hover img {width:110% ; height:110%;}
補足
おお、なるほどぉ。。。 そう書けばいいんですね。 後、画像の拡大の方なんですが、10個ほど同サイズのバナーを並べ てるのですが、1列にある数個のバナーだけマウスオーバー時にバカ みたいに大きくなってしまいます。。。 説明が旨くできないのですが、さすがにこんな説明ではどなたもわか らないでしょうか。。。
本当に<a>で囲って動作確認されていませんか？ IEの場合は<a href="#">という感じに、最低限href属性を指定しないとマウスオーバーは動作しません。
補足
<a href="#">という感じで記述はしています。 後、ちなみに使用ソフトはドリームウィーバーです。
補足
ありがとうございます。ウェブ標準じゃないのはわかっていつつ、非常に更新の多いページなので手軽さを選んでしまいます。。。 そこが原因でしょうか、とりあえず少し後になりますがためしてみようと思います！