JavaScriptでマウスオーバーを実現する方法
- マウスオーバーをJavaScriptで実現する方法を解説します。Google Chromeでは動作する方法ですが、IE6では動作しません。
- 要素のマウスオーバー時に文字色や背景色、画像を変更する方法をJavaScriptで実現します。
- JavaScriptのmouseOverイベントとCSSの:hover疑似クラスを組み合わせることで、マウスオーバー時にスタイルを変更することができます。
- ベストアンサー
マウスオーバーをjavascriptで実現する方法
添付画像のようにマウスオーバーすることで、文字色や背景色や画像(文字の後ろの■がダミー画像となります)を変更したいと思いました。 下記のソースでGoogle Chromeでは動作したのですが、IE6では動作しませんでした。 afterを使用しているのが原因と思い、こういう場合はjavascriptを使用して実現するのかなと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、ここに出てくる名前(ライフなど)は何文字になろうが、そのすぐ後ろに画像を表示させたいと思っています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- ul.category li{ list-style:none; line-heigh:2em; margin:0.2em; } ul.category li a{ background-color:white; color:blue; } ul.category li a:focus, ul.category li a:hover{ background-color:gray; color:red; } ul.category li a:after{ content:url(./images/arr_blue.gif); } ul.category li a:focus:after, ul.category li a:hover:after{ content:url(./images/arr_red.gif); } --> </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> </body> </html> 以上、宜しくお願いします。
- iroha_168
- お礼率89% (204/228)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CSSが切れていると冗長な表示になるためあまりお勧めはしませんが、 こんな感じでCSSで処理することはできます。 <style> .off{ display:none; } a:hover{ background-color:gray; color:red; } a:hover .on{ display:none; } a:hover .off{ display:inline; } </style> <ul> <li><a href="#">test1<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> <li><a href="#">test2<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> <li><a href="#">test3<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> </ul>
その他の回答 (2)
- PXU10652
- ベストアンサー率38% (777/1993)
「マウスオーバーをjavascriptで実現する方法」 onMouseOverとonMouseOutでマウスがその上にあるときとないときで、画像を入れ替えるようなJavaScriptを組んでやれば実現できます。↓ http://javascript.eweb-design.com/0811_mci.html http://javascript.eweb-design.com/0803_mci.html 私のホームページでもやっています。
- 参考URL：
- http://www.me-hp.com/
お礼
ご回答ありがとうございます。 今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
- reggaepunc
- ベストアンサー率59% (64/108)
:afterはie6はサポートしてないはず。 CSSでやるなら:hoverを使って、 背景画像の位置を変えることで動きをつけますね。多分。
お礼
ご回答ありがとうございます。 今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
関連するQ&A
- マウスオーバーで画像を変更する方法について
下記のソースでマウスオーバー時に文字の後ろの画像を変更したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、文字の長さは可変のため、何文字になるかはわかりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <style type="text/css"> <!-- img { border:0; } li { list-style-type: none; } li a { display:block; } li a:hover { color:red; background-color:green; } --> </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> </ul> </body> </html> 以上、宜しくお願いします。
- ベストアンサー
- HTML
- IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、Firefox等では隙間は出来ませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- ulの入れ子で困っています
以下のようにulの入れ子をしているのですがIE6と7で上に 隙間が空いてしまいます。 ulにmargin:0;を加えても全く効果なしなのですがどのように すれば隙間をなくせますでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> </head> <body> <ul id="hoge"> <li> <ul id="fuga"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- HTML
- サブメニュー表示方法
以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく 最初からHOMEの サブメニューを表示しておくには、どのようにしたらよいでしょうか。 初心者で、わからず困っています。 よろしくお願い致します。 ------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。 多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
- CSSのリスト表示
リストの表示ですが、li a で上下と左にpaddingを入れたいです。 IEではOKなのですが、Firefoxでは右に背景色が飛び出てしまいます。 どこを直したら良いでしょうか。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> で組んでいます。 #category { width: 180px; float: left; } #categoryt ul { border-top: 1px solid #999999; } #category li { border-bottom: 1px solid #999999; } #category li a { display: block; width : 100%; padding: 5px; background-color: #F6F6F6; text-decoration:none; color: #000033; } #category a:hover { background-color: #DBE7EE; color: #003366; } --------------------- <div id="category"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div>
- ベストアンサー
- HTML
- ホームページの質問。
ホームページの質問。 (x)html+cssでぐろーばるなびを作りました。 ぐろーばるなびにはバグもあると聞いてますが、以下の書き方で大丈夫でしょうか？ IE6等で起きるバグとかもあるらしいんですが、慣れてる方にみてほしいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>時間割</title> <style type="text/css"> <!-- ul { display: inline; line-height: 2em; font-size: 1.5em; } ul li { background-color: #F00; float: left; width: 150px; height: 50px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: #990; border-right-color: #990; border-bottom-color: #990; border-left-color: #990; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 1em; list-style-type: none; text-align: center; margin: 0px; padding: 0px; } a { display: block; height: 50px; width: 150px; } --> </style> </head> <body> <ul> <li><a href="Untitled-1.html">国語</a></li> <li><a href="Untitled-1.html">図工</a></li> <li><a href="Untitled-1.html">算数</a></li> <li><a href="Untitled-1.html">社会</a></li> <li><a href="Untitled-1.html">理科</a></li> </ul> </body> </html> 問題があれば、追加・変更タグを添えて回答願います。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <style type="text/css"> <!-- img { border:none; } .off{ display:none; } a:hover{ background-color:gray; color:red; } a:hover .on{ display:none; } a:hover .off{ display:inline; } --> </style> </head> <body> <ul> <li><a href="#">test1<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> <li><a href="#">test2<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> <li><a href="#">test3<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> </ul> </body> </html> このたびはどうもありがとうございました。 以上、よろしくお願いします。