• ベストアンサー

JavaScriptを使わずにCSSで

あるリンクにマウスポインタを当てると そのリンクのサブメニューリンクが表示されるように することはできるのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

Javascriptを使った場合と全く同じものとなるとは限りませんが可能です。(参考URL1) ただし、IEで可能かどうかは不明です。(参考URL2)

参考URL:
http://www.wiredope.com/csstemp/?p_id=sample_dynamic_1,http://blog1.fc2.com/hkom/blog-entry-133.html
guuman
質問者

お礼

ありがとうございます ie6を使ってますが参考サイトではサブメニューは表示されないみたいですね

すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.2

>JavaScriptを使わずに たぶん、実用的には無理と思います。 一応、言葉通りの >リンクにマウスポインタを当てると は、CSSの擬似クラスで可能でしょうが、 如何にして戻すというか非表示の状態にするかがポイントかと思います。 (あと、擬似クラスが有効なブラウザはという事と、目的がメニューである事がやっかいかも・・・。)

guuman
質問者

お礼

ありがとうございます やはり無理そうですね JSはブラウザやPCによって対応が違ったりするので使わないのが思うのですが残念ですね

すると、全ての回答が全文表示されます。

関連するQ&A

  • これはCSS?JavaScript?

    http://www.geocities.jp/naruyoru/ このサイトの ←のほうのメニューにマウスを当てるとリンク部分がへこんだようになりますよね? これを自作ホームページに適用したいのですが、やり方がわかりません。 できれば教えてくれませんでしょうか? お願いします。

  • CSSでグローバルナビゲーションメニューをつくりたい

    CSSで、グローバルナビゲーションメニューのボタンリンクをコーディングしたいと思っています。ボタンをマウスでポインタしたらロールオーバーし、カレントページのボタンはマウスでポイントした時と、同じようにロールオーバー画像を表示させたいと思っておりますが、可能なのでしょうか?

  • Excel 2000 でメニューバーにメニューを登録して

    ポップヒントを、サブメニューに表示したいのですが どのようにすればいいのですか? メニューバーにポップヒント(マウスポインタを合わせるとヒントが表示される)を表示させることは、できました。 サブメニューにはどうすればいいのですか?よろしくお願いします。

  • CSSとJavaScriptを使ってドロップダウンメニュー

    こんにちわ。 IE6、IE7上で動くHTMLを作成しています。 スタイルシートとJavaScriptを使ってドロップダウンメニューを実現しようと思ってます。IE6では問題ありませんがIE7で次の現象がッ発生します。 ブラウザ内で表示されている文字を反転させて、親メニュー上をマウスオーバーしていくと、マウスがメニューから離れたあとも、サブメニューの残像が残ります。 以下にサンプルソースを記載いたします。 親メニューはてすと、てすと2。 ”てすと”メニューには、サブ1、サブ2、 ”てすと2”メニューには、サブ3、サブ4のサブメニューを構成させています。 IE7でもマウスアウトさせた際、サブメニューの残像が残らないようにするには、どのような修正を加えるべきでしょうか? 原因と対策方法、ご教授ください。 test.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> <link rel=stylesheet type=text/css href=default.css> <title>TEST Homepage</title> </head> <body> <div id='menu'> <ul> <li><a target='_top' href='a.html'>てすと</a> <ul><li><a target='_top' href='b.html'>サブ1</a> <li><a target='_top' href='c.html'>サブ2</a></li> </li> </ul> </li> <li><a target='_top' href='a.html'>てすと2</a> <ul><li><a target='_top' href='b.html'>サブ3</a> <li><a target='_top' href='c.html'>サブ4</a></li> </li> </ul> </li> </ul> </div> <script type='text/javascript'> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <br> <br> <br> <hr> IE7の場合、ここをマウスカーソル反転させててすと1→てすと2メニューをhoverさせると!てすと1のサブメニューの残像が残る。 IE6は問題なし。 ------------------------------------------ CSSスタイルシート ------------------------------------------ #menu { width: 750px; margin: 0 auto; padding-top: 11px; white-space: nowrap; } #menu ul { padding: 0; margin: 0; margin-left:auto; margin-right:auto; list-style: none; } #menu li { float: left; background: #87CEFA; margin-right: 3px; border-top: 4px solid #00aaaa; } #menu li:hover, #menu li.sfhover { background: #BFFF00; } #menu li ul { position: absolute; width: auto; left: -999em; border:2px solid white; border-top:none; } #menu li:hover ul, #menu li.sfhover ul { left: auto; } #menu li ul li { float: none; margin-right: 0px; border-top:2px solid white;; text-align:left; } #menu a { display: block; width: auto; padding: 20px 5px 5px 5px; color: #000000; } #menu a:hover { color: #000000; } #menu li ul li a { padding: 5px 5px 5px 5px; } ------------------------------------------ 以上、宜しくお願いいたします。

  • javascriptでポップアップメニュー

    はじめまして。題記の件でつまっています。 画面上のメニュー表示項目にマウスカーソルを合わせると、その位置にサブメニューを表示させたいです。 サブメニュー表示時に実現したいことは以下の3点です。 1.サブメニューのHTMLは画面上に記述しておき、カーソルがメニュー表示項目にある場合のみvisibleにする 2.サブメニューはカーソルが別のメニュー表示項目に移動した場合には、別のメニュー表示項目上でサブメニューを出すようにし、メニュー表示項目以外にカーソルが移動した場合には、メニューを非表示にする 3.サブメニューの表示位置はマウスカーソルの位置にする <イメージ> /* メニュー部分*/ <ul> <li>メニュー表示項目1</li> ※1 <li>メニュー表示項目2</li> … </ul> /*サブメニュー部分*/ <div id="menu" class="hidden"> <div>サブメニュー1</div> <div>サブメニュー2</div> </div> ※1にカーソルをあてると、下のhidden項目をカーソル位置に表示する カーソル移動にあわせてメニューを追従させたり、メニュー領域以外の場合に非表示とすることができません。(つまりほとんどうまくいってないのですが・・・) どうかご教示いただけないでしょうか。よろしくお願いします。 ちなみに以下のサイト様を参考にさせていただいてますが、こちらはカーソル位置に表示ではなく固定位置にサブメニュー表示でした。 http://miyakekobo.fc2web.com/temp/total_pd104.html

  • カスケードメニューが表示できなくなりました

    ある日突然カスケードメニューが表示できなくなりました。 一例として「スタート」をクリックして右向きの▼印のある「すべてのプログラム」にマウスポインタを合わせるとサブメニューがズラズラズラーと表示されていました。ある時期からマウスポインタを合わせてもそれが表示されなくなりました。 その状態で左クリックすると勿論通常にサブメニューを表示するので、1クリック動作が増えて面倒くさいだけで、極端な実害はないのですが、いちいちクリックしなければならないのでいらいらします。元のように復旧する方法はないでしょうか?

  • javascriptでなめらかなプルダウンメニューを

    javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。

  • フラッシュメニューの作成

    こんにちは、ホームページにフラッシュメニューをつけたいです。 ボタンの上にマウスを持ってくるとサブメニューが表示されるやつです。無料の素材だと大きさが合わず、拡大すると変になってします・・。ですので、自分で作ろうと思うのですが、どなたか作り方を教えて頂けませんか?FLASH MAKER3なら持っているのですが、その他簡単に作れるソフトがあれば教えて下さい。メニューは縦です。ボタンを押すと表示されるのではなく、マウスを持ってきた時だけ表示させ、そのサブにもリンクをはりたいです。すみませんが、よろしくお願い致します!!!!

  • Excelのメニュー表示を右側にしたいのですが

    Excel 2010を使用中ですが、突然マウスの右クリックで表示されるメニューがマウスポインターの左側に表示されるようになってしまいました。従前のように、メニューがマウスポインターの右側に表示されるようにしたいのですが、どなたかその方法を教えてください。よろしくお願い致します。

  • windows2000のメニューについて

    Win2000のスタートメニューをクリックして、プログラムにマウスポインタを合わせると全てのサブメニューが出てきませんよね?サブメニューの一番下の矢印みたいなものをクリックすると隠れているメニューが出てきます。これを最初から全て出るようにできるでしょうか?お分かりの方、よろしくお願い致します。

このQ&Aのポイント
  • ぷらら(インターネット接続サービス)で解約された理由がわからない
  • 解約した覚えがないのにぷららで解約されており、メールの送受信ができない
  • ぷららの解約に関する問題で相談したい
回答を見る

専門家に質問してみよう