- ベストアンサー
FC2ブログのナビゲーションボタンにロールオーバー効果を追加する方法
- FC2ブログのナビゲーションボタンにロールオーバー効果を追加する方法をご紹介します。HTMLとCSSのコードを使用して、ボタンの画像を切り替えることでロールオーバー効果を実現します。
- ナビゲーションボタンはHTMLのdiv要素を使用してグループ化されており、各ボタンはCSSでスタイリングされています。各ボタンの画像リンクを設定し、マウスオーバー時に画像を切り替えるようにします。
- 具体的なコードは以下の通りです。まず、HTMLのdiv要素にはid属性を指定し、CSSでスタイルを指定します。各ボタンの画像はimg要素で表示し、a要素でリンクを設定します。CSSにはfloatプロパティを使用して各ボタンを横並びに配置します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そういうのは、 リストにして、 aをblockレベル表示にし、 hover時にaのbackground-imageを入れ替えることで実現する、 というのがメジャーだと思います。 <style type="text/css"> <!-- #navi { margin : 5px auto 0; padding: 0; width : 800px; list-style-type:none; overflow:hidden; } #navi li{ float:left; } #navi li a{ display:block; width:120px; text-align:center; background: #fee url() no-repeat left top; } #navi li a:hover{ background: #eff url() no-repeat left top; } #navi li a:link, #navi li a:visited, #navi li a:hover, #navi li a:active{ text-decoration:none; } .navi01{ margin-left: 15px; } .navi02{ margin-left: 10px; } .navi03{ margin-left: 10px; } --> </style> </head> <body> <ul id="navi"> <li class="navi01"><a href="http://www.google.co.jp/">Google</a></li> <li class="navi02"><a href="http://www.yahoo.co.jp/">Yahoo!!</a></li> <li class="navi03"><a href="http://www.msn.co.jp/">MSN</a></li> </ul> </body> </html> この例はhover時にbackground-colorを替えていますが、 url()の中身を替えるようにすれば画像で行なえます。
その他の回答 (1)
私もよくわからないですが、 JavaScriptを使わない場合 http://css-happylife.com/archives/2008/0602_1737.php JavaScriptを使う場合 http://css-happylife.com/archives/2007/0621_0010.php こちらを参考にされては、いかがでしょう。
