- 締切済み
マウスオーバーで画像がずれてしまいます。。。
あるリンクにマウスを乗せると、 そのリンクより下の部分全てが上に詰めてずれてしまいます。 また一番上にあるリンクにマウスを乗せると、 元通りになります。。。 a:hoverの設定なんでしょうか？
- cosmosquad
- お礼率86% (111/129)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
関連するQ&A
- マウスオーバー：一つの画像だけを変えるには？
javascript初心者です。マウスオーバーの記述について教えてください。 ３つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、３つもと同じです。 例：A・B・Cのリンク画像 A～CのどれをオンマウスしてもAの画像だけが変わるようにしたい。 また、マウスアウトした時には、元の画像に戻るようにしたいです。 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- マウスオーバーでテキストの色を変えたい
はじめまして。 よろしくお願いいたします。 一部テキストリンクのマウスオーバー時の色を変えたいんです。 CSSで a:link { color:#0000FF; } a:visited { color:#0000FF; } a:hover { color:#FF0000; } a:active { color:#0000FF; } と設定しています。 そして、一部だけは通常時白にして、マウスオーバー時を赤にしたいと思っています。 一部だけ変える方法が分かりません。 簡単なことかも知れませんがよろしくお願いいたします。
- ベストアンサー
- HTML
- ＣＳＳの画像のマウスオーバーの質問です
こんにちは [画像A]にリンクをはって、マウスオーバーの時に、[画像B]に切り替わるようにしたいのですが、できません。 ドリームウィーバーのビヘイビアパネル→スワップイメージを使うとできました。 しかし、CSSを使って、マウスオーバー時に画像を切り替えたいのです。 テキストを入れて、テキストインデント、-9999でテキストを飛ばして背景に「画像A」を持ってきて、a:hoverで「画像B」をいれて、マウスオーバーを切り替える。これもできました。 しかし、 <body> <a href="#"><img src="images/gazou.jpg" width="100" height="100" /></a> </body> ↑ このような画像のリンクにＣＳＳを使ってマウスオーバーの画像切り替えをしたいのです。 どなたか、ご存知の方教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- マウスが乗ったとき斜め下に下がる
画像にマウスが乗ったときに、斜め右下に下がるには、CSSで A:HOVER{position : relative;top:2px;left:2px;} と設定すれば よいとはわかるのですが、この設定は部分的にあてはめることはできないのでしょうか？ 同じテーブル内に、下がるアクションがほしいリンク画像と、下がってほしくないリンク画像があるのです。 どのようにすればよいか教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでのマウスオーバー効果
質問させて下さい。 サイト上でバナーやテキストに（もしくは並んだバナーとテキスト 両方に）リンクを張っている状態です。 マウスオーバー時に画像とテキストどちらも少し大きく表示される ように下記のようにCSSのコードを想像して書きました。 ------------------------------------------ 略 a:hover { color:#333333; } a:hover img {width:110% ; height:110%;} a:hover font {font-size: 120%;} 略 ------------------------------------------ すると不具合がいくつかあり、お力を貸して欲しいです。 （１）テキスト単独のリンクに関しては、全く動作しない ようです・・・。ただ、バナーとテキスト両方まとめて <a>～</a>で囲った場合は一部の場所のみ？動作するみ たいです。 （２）画像の効果はファイヤーフォックスでは希望通り動作し ますが、ＩＥだと全く反応しません・・・。 何か簡単な解決方法はないでしょうか？ よろしくお願い致します。 （画像を複数用意してJava等でロールオーバーの設定をさせる等は 手間も掛かりますし、コードも多くなるのでなるべくしたくあり ません。このCSSの記述の変更でどうにかならないでしょうか）
- ベストアンサー
- HTML
- マウスを乗せると、背景色が変わる仕組みは知ってるんですが・・。
マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。 そこで問題が発生しました。 私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。 でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね？CLASSで個別に設定しようとしても無理でした。どうすればいいですか？ そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景（もしくはボックス内の背景）が 変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね？できればボックスごとのオンマウス時の背景色を設定できるようにしたいです
- ベストアンサー
- HTML
- マウスオーバーでの外部swf読み込み
ボタンにマウスオーバーすると、外部swfを読み込むムービーを作っております。 |￣￣￣￣￣| | Ａ | |＿＿＿＿＿| ■■■■■■ こんな感じで、黒の■がそれぞれボタン、読み込むステージがＡの枠です。(ちょっとズレてますが。。)■ボタンとステージaはぴったり隣接しています。 例えば、一番左の■ボタンにマウスオーバーし、Ａにムービーが流れます。 このときにカーソルが■ボタン、Ａの上を行き来しても、ずっとムービーが流れていて、■ボタンとＡを合わせた領域をはみ出すと、はじめてムービーが消えるというものを作りたいのです。 要は、■ボタンにマウスオーバーすると、下の図の部分にカーソルが乗っている間はムービーが再生中。下の図の部分をカーソルが外れるとムービーが消えるというものです。 |￣￣￣￣￣| | Ａ | |＿＿＿＿＿| ■ これを各■ボタンに設定。そして■ボタン自体は単体で外部リンクします。 いろいろやってみたのですが、■ボタンからＡに乗るとムービーが再度頭から再生したり、上図のかたまりを図形とした透明領域を作ると■ボタン単体のリンクで引っかかってしまったりと。。 良いアドバイスはないでしょうか？よろしくお願いいたしますm(_ _)m
- 締切済み
- Flash
- IE8で見るとリンク先が開かない。マウスオーバーにもならない。
IE8で見るとリンク先が開かない。マウスオーバーにもならない。 すいません。どなかた良いお知恵を伝授頂ける方がいらっしゃいましたら、ご教授ください。 案件は、IE8で見るとリンク先が開かない。マウスオーバーにもならないという点です。楽天トラベルのページ制作を行っているのですが、クライアントの会社PC(windowsでie8を使っているという点しかわかっていません。ネットワークを組んでいるとは聞いています。)で見ると、リンク先が開かない、マウスがオーバーにもならない（ポインタの形が変わらない）という指摘を受けました。 ちなみに、私の自宅PC(windowsXPでie8と、macbookのsnowLeopardのbootcampでie8)では問題無くリンク先も開きますし、マウスのポインタも変わります。自宅PCでは他のブラウザも同様です。 クライアントには、ie8のセキュリティーレベルの設定か、ネットワークの管理者権限設定で何かしていないかと訪ねてみたのですが、「他の楽天トラベルでのページなら、リンク先は普通に開く」との回答でした。 リンクボタン部分の制作は、htmlとcssを使用して<a href=>をdisplay:block;にして、a:linkやa:hoverで作った画像が切り替わるように設定しております。 上記問題を解決するための何か良い知恵があれば、ご教授ください。 よろしくお願い致します。
- 締切済み
- HTML
- 画像リンクをマウスオーバーで透過画像を重ねる方法
複数の画像リンクをマウスオーバー時に決まった画像を重ねて表示させたいのですが分かりません。 ご教授頂けないでしょうか。 画像リンクの上にマウスが乗った時に虫眼鏡や再生ボタンが表示される みたいな事がしたいのです。 自分なりに調べた結果画像を上に重ねるところまでは分かったのですが、重なった時点で画像リンクが無効になってしまいます。 方法としては <p class="figure" id="jpg01"> <a href="リンク先" target="_blank"><img src="画像" width="300" height="150" alt=""></a> </p> p.figure{position:relative;} p.figure:after{position:absolute;bottom:0;left:0;} p#jpg01:hover:after{content:url(重ねる画像.png);} としているのですがリンク先に飛ぶことができません。 <a href="リンク先" target="_blank"><p class="figure" id="jpg01"> <img src="画像" width="300" height="150" alt=""> </p></a> とすれば上手くいったのですが不格好な気がします。 ちなみに画像リンクに使いたい画像もそれに重ねたい画像も同じサイズです。 どうかよろしくお願いします。
- 締切済み
- HTML
- スタイルシートとリンク・下線・マウスのせると変化 先ほどの続き
ページ内で、リンクについて下線を表示させる方法として、以前使用していたA:link{文字色など から、.u_line{文字色など との記載に変更しました。 これにより、下線をつけたいリンクには<a class=u_line>とすることによって希望どおりの下線を表示させ、下線をつけたくないリンク部分にはそのまま記述することで、下線を自由に設定できました。 このページ内で同時に設定していた A:hover{文字色など による、マウスをのせた時に文字色を変化について、あるリンクは下線＋マウスのせると変化、他のリンク（画像）は下線なし＋マウスのせても変化なし、ということはできるのでしょうか？ 先ほどと同様の、.hover{文字色など ではできませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
大変遅くなりました、すいません。 どうやらスクリプトの書き方だったみたいです。 ありがとうございました。