ベストアンサー cssを使って何も無いところにマウスが来た際(hover時)に画像が出 2010/06/28 17:40 cssを使って何も無いところにマウスが来た際(hover時)に画像が出るようにしたいのですが、 ご存知方いましたら、教えて下さい。 みんなの回答 (1) 専門家の回答 質問者が選んだベストアンサー ベストアンサー metametamu ベストアンサー率51% (153/295) 2010/06/29 03:21 回答No.1 .hoge { visibility:hidden; } .hoge:hover { visibility:visible; } <img src="#" alt="" class="hoge" /> こんな感じですがcssでやるのはブラウザのことを考えるとまだやめておいた方がいいと思います。 javascriptでやるのをオススメします。 <img src="#" alt="" style="visibility:hidden;" onmouseover="this.style.visibility='visible'" /> 質問者 補足 2010/06/29 14:25 CSSやってみましたが、表示されませんでした。やはり難しいですね。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発HTML 関連するQ&A CSSの画像のマウスオーバーの質問です こんにちは [画像A]にリンクをはって、マウスオーバーの時に、[画像B]に切り替わるようにしたいのですが、できません。 ドリームウィーバーのビヘイビアパネル→スワップイメージを使うとできました。 しかし、CSSを使って、マウスオーバー時に画像を切り替えたいのです。 テキストを入れて、テキストインデント、-9999でテキストを飛ばして背景に「画像A」を持ってきて、a:hoverで「画像B」をいれて、マウスオーバーを切り替える。これもできました。 しかし、 <body> <a href="#"><img src="images/gazou.jpg" width="100" height="100" /></a> </body> ↑ このような画像のリンクにCSSを使ってマウスオーバーの画像切り替えをしたいのです。 どなたか、ご存知の方教えてください。 よろしくお願いします。 マウスをのせると画像が動くcssについて マウスをのせると画像が動くCSSについて質問します。 http://kumacrow.blog111.fc2.com/blog-entry-486.html このページに書いてあることをやりたいです。 通常ですと、<head>内にCSSを記入して、html内でclassで呼び出すと思うのですが、html内に全て書く場合はどうすればいいのでしょうか? <a href="http://~" style=" a:hover { position: relative; top: 5px; left: 5px;}"><img src="(画像のある場所)" /></a> このような書き方では上手くいきません。 どのように書けばいいのか教えてください。 リンク画像のマウスオーバー時の下線を消したい。(a:hover 関連。 テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。 ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム CSSでポイント時に画像を消す? JavaScriptを使わずにCSSを用いて、 マウスカーソルを画像に合わせたときに 画像が消えるようにしたいのですが、 可能ですか? <a href="#"><img src=""></a> a:active img, a:hover img { display:none: } としてみたんですが カーソルを合わせると画像が点滅してしまい うまく表示できませんでした。 よろしくお願いします。 CSSでhover時に画像変更したい 通常状態で画像の上半分を、マウスを画像上に持ってきたときにCSSで下半分を表示させています。 【CSS】 a:hover{ background-position: 0px 20px; } a{ background-position: 0px 0px; height:20px; width:100px; display:block; } a.header_top{ background-image:url(./image/top.gif);} a.header_link{ background-image:url(./image/link.gif);} 【HTML】 <a href="index.html" class="header_top" title="トップページへ"></a> <a href="link.html" class="header_link" title="リンク"></a> これだと縦にリンクを並べるのはいいのですが、横一列にしたい場合はどうすればいいでしょうか。 テキストのリンクだとdisplayをinlineにすればよいかと思うのですが、画像の場合、実体がないのでblockにしないときちんと表示されません。 よろしくお願いします。 CSS マウスオーバーでテキストの上に画像を表示させるには? CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる(テキストが見えない状態にする)方法というのはありますか? background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像1→画像2 と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。 CSS:hoverでナビボタンの背景画像を変えたいのですが・・ CSS:hoverでナビボタンの背景画像を変えたいのですが・・ ナビボタンの左端に20pxくらいの余白をあけたいと思い、 #navi li{ list-style-type: none; line-height: 38px; font-size: 14px; padding-left: 20px; } としていました。が、hoverで背景画像が変わるように設定したところ、 Paddingの部分だけリンクが無効になっていて、変更画像が右に20pxずれて表示されます。 (リンク元のテキストの始まる部分からしかリンクが有効にならないので) display:block;の設定もしています。 結局、私の知識ではPadding-leftを削除して、テキストの左側にスペースを挿入するという 不細工な方法でしか思い通りの表示がされない状況です。 CSSでの正しい設定方法を教えていただけないでしょうか。 1番右側の画像のhoverだけ位置をずらしたい テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、 一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、 この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。 http://okwave.jp/qa/q6343605.html ↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。 現在設定しているのは下記のコードです。 どなたかご教授下さい。 【html】 <tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td> </a></td> </tr> 【css】 td.type1 { height: 185px; width: 185px; background-color:#FFF; } a#hover img{ border:none; padding:5px; width:100px; height:100px; border: 1px solid #CCC; } a#hover{ display:block; width:100px; height:100px; } a#hover:hover img{ width:300px; height:300px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF; } ちなみにtdが4つ入ります。(画像は横に4つ入り、一番右側というのは4番目になります) マウスオーバー時の画像とCSSについて 久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって 色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという カスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ display:block; width:100px; height:25px; background-image:url(./home.png); text-indent:-10000px; list-style:none; } a:hover.link1{ display:block; width:100px; height:25px; background-image:url(./home_over.png); text-indent:-10000px; list-style:none; } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。 上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで 画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。 何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、 困っております。 どうか智恵をお貸し下さい。宜しくお願いします。 マウスアウト後も画像が消えたままにしたいのですが cssまたはjqueryの件で質問です。 背景画像をマウスオーバーで「noneimage(背景画像なし)」に設定しているとして、 その後マウスアウトしても画像が消えたまま(マウスオーバー状態の効果を持続)にするにはどのようにすればいいでしょうか? とりあえずcssで「:hover」でbackground-image:noneにしていますが、 これだとカーソルがそれた時点で背景画像が出てきてしまいます。 経験が浅いのでcssかjqueryかどちらを使えばいいかわかりませんが どなたか例を教えて頂けますと幸いです。 どのようにしたいか図で示したものを添付しますので 参考にしてください。 よろしくお願い致します。 cssファイル上で、リンクを飛ばしている文字に、hoverで色指定して cssファイル上で、リンクを飛ばしている文字に、hoverで色指定して、マウスオーバーすると色が変わるようにしているのですが、1度は解決されたのに、またhoverしなくなりました。マウスをのせても色が変わらないのです!"{"もれなどはありません。。。 少ない情報ですが、考えられる原因を、どなたか教えていただけますか? しかも、フッター部分のリンクをとばしている文字もhoverさせているのですが、ときどき指定の色ではなく、青になってしまっています。でもいつもじゃないんです。 よろしくお願いします!ありがとうございます! css hover ie6 いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容:画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; } AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム 画像のマウスオーバーの際のズレを直すには CSSを用いてマウスオーバーで画像に枠を付けるスタイルを使用したのですが、マウスオーバーした際に枠が出ると同時に画像が少し右下にずれてしまいます。マウスオーバーで枠を表示させながら画像は固定させるという事は出来るのでしょうか?宜しくお願いします。 CSSでのマウスオーバー効果 質問させて下さい。 サイト上でバナーやテキストに(もしくは並んだバナーとテキスト 両方に)リンクを張っている状態です。 マウスオーバー時に画像とテキストどちらも少し大きく表示される ように下記のようにCSSのコードを想像して書きました。 ------------------------------------------ 略 a:hover { color:#333333; } a:hover img {width:110% ; height:110%;} a:hover font {font-size: 120%;} 略 ------------------------------------------ すると不具合がいくつかあり、お力を貸して欲しいです。 (1)テキスト単独のリンクに関しては、全く動作しない ようです・・・。ただ、バナーとテキスト両方まとめて <a>~</a>で囲った場合は一部の場所のみ?動作するみ たいです。 (2)画像の効果はファイヤーフォックスでは希望通り動作し ますが、IEだと全く反応しません・・・。 何か簡単な解決方法はないでしょうか? よろしくお願い致します。 (画像を複数用意してJava等でロールオーバーの設定をさせる等は 手間も掛かりますし、コードも多くなるのでなるべくしたくあり ません。このCSSの記述の変更でどうにかならないでしょうか) CSSを用いてのマウスオーバー CSS勉強中です。 今やろうとしていることができるのか不安になってきました。 可能ならサンプルコードを教えて頂けませんでしょうか。 2行×4列のテーブルで 一行目の4つのセルにマウスオーバーした時、 2行目の連結セルの背景を変えたいのですが 可能でしょうか? テーブルを使ってのhoverはなんとかわかったのですが 別の行を修飾する方法がわかりません。 どうか宜しくお願い致します。 CSSに関する質問です CSSで下記のように設定したとします。 A:HOVER{ color #好きな色; position:relative; top:1px; left:1px; } こうするとリンクにマウスを乗せた時に文字が斜め下に移動するように出来ますが、 これをテキストのみに適用させたいのです。 画像は動くと不格好なところも多いので、画像だけ適応させないような方法はないのでしょうか? 難しいような場合には、 個別に画像に対してCSSをかぶせる予定です。 よろしくお願いいたします。 BODY内にCSS「a:hover」を使いたい 「HEAD内の書き換えは不可」 「スクリプト(JavaScriptなど)言語使用不可」 という条件がある中で、 オンマウスした時にフォント色と画像の変化をしたいのです。 BODYタグ内で、スタイルシートの「a:hover」を設定する方法、 その他でも可能になる方法があれば教えてください。 また、<style type="text/css">宣言はHEAD内にということですが、 無理やりBODY内に<style type="text/css">宣言した場合 どのような現象が起きるのでしょうか? (実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした) よろしくお願いします。 a:hoverの重さ こんにちは。 マウスを乗せたときに背景色を変えることもできる為、重宝しているCSSのa:hoverなのですが、とても重いのです。 マウスを乗せたときに背景色を変える処理を行っているのですが、マウスを乗せた途端、CPU使用率が90%を超え、格段にスピードが落ちます。 しかし、文字色を変える処理だとスムーズに動くのです。 さらに背景色を変える処理も、ホームページによってはスムーズに動く。 この違いが全く分かりません。 この現象の原因、出来れば解決策まで教えてください。 :hover時のtransitionが不安定 <style> div { width: 250px; height: 250px; background: red; opacity: 1; transition: all 500ms linear; } div:hover { opacity: 0; } </style> <div></div> 上記のようなコードで、マウスホバー時にtransitionが効かず、アニメーションすることなく要素の透明度が切り替わってしまうことが度々あります。Mac Chromeの最新版 + oapcityの制御においてのみ発生する現象なのですが、対策、もしくはこの問題について何かご存知の方いらっしゃいましたら、ご回答お願いします。なお、prefixや、transition対象をallからopacityに指定、cssの:hoverからjavascriptでhover制御へ変更等、思いつくことはひと通り試しましたが特に変化はありませんでした。また、background-visibility:hiddenを指定すると、解決はしませんが、発生頻度は多少緩和するような気がします。 よろしくお願いします。 HPで画像の一部にマウスがのった時に画像を変えたい 現在、自社のホームページの作成を行っております。 そこで、以下のようなことを実現したいのですが、わからないので教えてください。 ----------- | | | ● | | | ----------- 上記のような、四角い枠の中に●がある画像があります。 この●にマウスをのせたときに、この四角い枠と丸の画像全体を変えたいと思っております。 画像上の●以外のとこにマウスをのせても画像は切り替わらないようにしたいと思っております。 四角い画像上にマウスをのせたときにhoverで画像を切り替えるようなことはできるのですが、 画像の一部(●部分)にマウスをのせたときにだけ画像を切り替える方法がわからないので困っております。 教えて頂けないでしょうか。 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
補足
CSSやってみましたが、表示されませんでした。やはり難しいですね。