- ベストアンサー
マウスオーバー状態を持続する方法について
- 背景画像をマウスオーバーで「noneimage」に設定し、マウスアウト後も画像が消えたままにしたい場合、どのようにすれば良いか質問しています。
- 現在はCSSの「:hover」を使用して背景画像を非表示にしていますが、カーソルがそれた時点で背景画像が表示されてしまうという問題があります。
- 経験が浅いため、CSSかjQueryのどちらを使用すれば良いかわからない状況で、例を教えていただきたいと質問しています。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- e_watt
- ベストアンサー率71% (25/35)
マウスが乗っかったら、クラスをどーんと変えてしまうのはどうでしょう。 マウスがいなくなってもクラスは変えられたままです。 <style type="text/css"> .xlist { /* 元のクラス */ background-image: url('./bg.png'); } .keepNoImage { /* 背景なしのクラス */ background-image: none; } </style> <script type="text/javascript"> function classChange(obj,newName) { // objのクラスをnewNameに変えちゃう obj.className = newName; } </script> <hx>CATEGORY</hx> <!-- 最初は'背景付き'、 マウスが乗ると、(自分を, '背景なしのまま'クラスに)変身させる --> <ul id="QQ" class="xlist" onMouseOver = "classChange(this,'keepNoImage');"> <li><a href="Link01">Link01</a></li> <li><a href="Link02">Link02</a></li> <li><a href="Link03">Link03</a></li> <li><a href="Link04">Link04</a></li> </ul> <div onClick="classChange(document.getElementById('QQ'),'xlist');"> ここをクリックすると元通り？（リロードしても元通りですが） </div>
お礼
回答ありがとうございます。 なるほどなるほど！ がっつり変えてしまうのもありですね～。 サブカテゴリがドロップダウンのアクションなので どんな感じの表現になるかちょっと試してみます。 ありがとうございます！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
サブリストが表示されているときは、背景画像が表示されたままと拡大解釈すれば良いでしょうね。サブリストも当然ながら親コンテナブロックの子供ですから、子供の上にマウスがあるとき＝親の上なのですから、子供の上にマウスが乗っても表示され続けるはずですね。 すなわち、HTMLは下位リストを持つナビゲーションリストですから、下のような形であるはずですね。 <div class="nav"> <ol> <li><a href="A">AAA</a></li> <li><a href="B">CATEGORY1</a>・この項目にポインターが乗ると↑ <ol> ・・・・・・・・・・・・・・この背景は常に見えていて ここから <li><a href="B/1">BBB-1</a></li>・ここが表示される。 ｜ <li><a href="B/2">BBB-2</a></li> ｜ <li><a href="B/3">BBB-3</a></li> ｜ </ol> ｜ </li> ↓ <li><a href="C">CATEGORY2</a> <ol> <li><a href="C/1">CCC-1</a> <li><a href="C/2">CCC-2</a> </ol> </li> <li><a href="D">DDD</a> <ol> <li><a href="D/1">DDD-1</a> <li><a href="D/2">DDD-2</a> <li><a href="D/1">DDD-1</a> <li><a href="D/2">DDD-2</a> <li><a href="D/1">DDD-1</a> <li><a href="D/2">DDD-2</a> </ol> </li> </ol> </div> というスタイルシートにすれば良いです。
お礼
回答ありがとうございます。 マウスアウト後ものままにしたいと依頼主の要望だったもので...。 詳しく回答頂き感謝です！ こちらで一度試してみます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
関連するQ&A
- CSS マウスオーバーでテキストの上に画像を表示させるには？
CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる（テキストが見えない状態にする）方法というのはありますか？ background-image を使うとテキストが見えてしまいます・・ マウスオーバーで 画像１→画像２ と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像 と表示させる方法は見つかりませんでした。 よろしくお願いいたします。
- ベストアンサー
- 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について
久しぶりに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でポイント時に画像を消す？
JavaScriptを使わずにCSSを用いて、 マウスカーソルを画像に合わせたときに 画像が消えるようにしたいのですが、 可能ですか？ <a href="#"><img src=""></a> a:active img, a:hover img { display:none: } としてみたんですが カーソルを合わせると画像が点滅してしまい うまく表示できませんでした。 よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- 画像変更について
いつもお世話になっています。 今回は、マウスオーバーで自動開閉するアコーディオンメニューをli ul liを使って作成しました。 以下がそのソースです。 ---------------------html--------------------- <!--menu_1--> (1)<ul id="slidemenu_sample"> (2)<li class="bottom" > <a href="○○○" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">TEST</a> <!--menu_1 submenu--> (3)<ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"> (4)<li><a href="○○○">test</a></li> </ul> <!--menu_1 submenu end--> </li> </ul> <!--menu_1 end--> ---------------------css--------------------- ul#slidemenu_sample li.bottom { text-align:center; background-image : url(bt_floor_bg_up.gif) ; font-size:15px; border:none; } ul#slidemenu_sample li.bottom a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_floor_bg_down.gif) ; } ul#slidemenu_sample li ul li { background-image : url(bt_menu_bg_off.gif) ; } ul#slidemenu_sample li ul li a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_menu_bg_on.gif) ; } --------------------------------------------- マウスオーバーで(2)(4)の背景画像をそれぞれの背景画像に変えたいと思っています。 (4)の背景画像は上記のソースで変えれたのですが、(2)の背景画像ををマウスオーバーで変えられません。 CSSで変えられると思うのですが、どうしたらいいのか分からず、詰まっています。助言をお願いいたします。
- ベストアンサー
- JavaScript
- CSSでマウスオーバーを作成しています。
CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで背景画像マウスオーバー
スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。
- ベストアンサー
- ブログ
- マウスオーバすると画像の配置が変わる
今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。 サイト：http://snapkidz.biz/wp/ ブルブルする場所はコップの部分になります。 記載部分は以下です。 ーheader.phpー <a href="#" class="cup">cup</a> ーCSSー a.cup { display: block; width: 90px; /* 画像1枚分の横幅 */ height: 110px; /* 画像1枚分の高さ */ text-indent: -9999px; /* 文字を見えなくする */ background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */ position:relative; top:303px; left:1080px; } a.cup:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ } マウスオーバすると画像の配置が移動してしまいます。 これはどうすればなおるのでしょうか？ 宜しくお願いします。
- ベストアンサー
- CSS
- 画像にマウスを重ねると大きな画像を表示したい
illustratorでスライスを作製し、画像を生成しました。 1000×1076のサイズで32個の画像で構成されるスライスになっています。 そのスライスの一部の画像にマウスオーバーするとスライス全体の 1000×1076と同じサイズの背景透明画像を上に表示したいのです。 よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。 本来Flashなどでやるようなことと思いますが、 iPadでも見たいためCSSやJavascriptで実現したいと思います。 よろしくお願い致します。
- 締切済み
- CSS
- jqueryでテーブル行のマウスアウト時の動作
jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
お返事遅くなり申し訳ございません。 サンプルありがとうございます！ わかりやすくて助かります！ こちら参考にさせていただきます。 質問させていただいた件はおかげさまで ほぼ解決致しました。 サイト作成は調べつつ試しつつの作業ですね。 ご協力本当にありがとうございます！