質問: html css jsなどを用いてリンクの設定 初心者です。 質問させて頂きます。 aタグを使用し、リンクする際の質問です。 1つのブロック内のどこの上にマウスを持ってきても ブロック内の画像と文字が変更出来るようにしたいです。 ブロック内のどこの上にマウスを持ってきても リンクは出来るようになりました。 しかし、合わせて画像を変更したりが出来ません。 詳しい方、お返事頂けると幸いです。 宜しくお願い致します。
回答: こんにちは >nintendoのウェブサイトのheader-navのような物 同じようなサイトが何か所かあるのと、私の環境ではきちんと見られないのですが、ここのことでしょうか? https://www.nintendo.co.jp/ 一番上のメニューのことを指しているのだとすると、(内容を確認したわけではありませんが)これって内容を書き換えているわけではなくて、表示する内容をあらかじめ何種類か用意しておいて、マウス位置に応じて表示するものを変えているのではないでしょうか? もちろん、都度内容を書き換えても同様のことは可能ですが、それぞれの内容構成やレイアウトが違ったりするとそれも含めて全部修正するよりも、それぞれを用意しておいて必要に応じて表示する方がわかり易いと思います。 (このサイトが実際にどのような方法で実現しているかは確認していません) >aタグを使用し、リンクする際の質問です リンクとは直接関係が無いように思われますが、上記のメニュー部分のようなものを作成したいのなら、cssでもjavascriptでも実現可能かと思います。 css3では、アニメーション等も可能になりましたので、scriptなしでもいろいろなことが実現できるようになっています。 まったく同じではありませんが、hoverした際に対応する要素が表示されるcss利用の簡単な例を、ご参考までに以下に。 (他にも方法はあると思いますし、もちろんjavascriptでも実現可能です) sample nav>ul{ list-style-type: none; padding:0.4em 3em; background-color:red; } nav>ul>li{ position: relative; display:inline-block; width: 3em; margin:0 2em; } nav>ul>li>a{ text-decoration: none; color: #fff; font-weight:bold; } nav>ul>li>div{ position: absolute; width: 30px; height: 0; background-color: #dfe; overflow: hidden; } /* hover時の表示 */ nav>ul>li:hover>div{ transition-duration: 0.4s; width:300px; height: 200px; } * menu1 hoge1 hoge1 ! * menu2 fuga2 fuga2 ! * menu3 piyo3 piyo3 ! main content