専門家に聞いた!繰り返す痔の原因は!? >>

初心者です。
質問させて頂きます。

aタグを使用し、リンクする際の質問です。

1つのブロック内のどこの上にマウスを持ってきても
ブロック内の画像と文字が変更出来るようにしたいです。
ブロック内のどこの上にマウスを持ってきても
リンクは出来るようになりました。
しかし、合わせて画像を変更したりが出来ません。
詳しい方、お返事頂けると幸いです。
宜しくお願い致します。

質問者からの補足コメント

  • 補足します。
    nintendoのウェブサイトのheader-navのような物を
    イメージして頂けると分かりやすいです。

      補足日時:2017/10/02 15:54

A 回答 (1件)

こんにちは



>nintendoのウェブサイトのheader-navのような物
同じようなサイトが何か所かあるのと、私の環境ではきちんと見られないのですが、ここのことでしょうか?
https://www.nintendo.co.jp/
一番上のメニューのことを指しているのだとすると、(内容を確認したわけではありませんが)これって内容を書き換えているわけではなくて、表示する内容をあらかじめ何種類か用意しておいて、マウス位置に応じて表示するものを変えているのではないでしょうか?

もちろん、都度内容を書き換えても同様のことは可能ですが、それぞれの内容構成やレイアウトが違ったりするとそれも含めて全部修正するよりも、それぞれを用意しておいて必要に応じて表示する方がわかり易いと思います。
(このサイトが実際にどのような方法で実現しているかは確認していません)


>aタグを使用し、リンクする際の質問です
リンクとは直接関係が無いように思われますが、上記のメニュー部分のようなものを作成したいのなら、CSSでもjavascriptでも実現可能かと思います。
CSS3では、アニメーション等も可能になりましたので、scriptなしでもいろいろなことが実現できるようになっています。


まったく同じではありませんが、hoverした際に対応する要素が表示されるCSS利用の簡単な例を、ご参考までに以下に。
(他にも方法はあると思いますし、もちろんjavascriptでも実現可能です)

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
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;
}
</style>
</head>

<body>
<nav>
<ul>
<li><a href="#hoge">menu1</a>
<div><p>hoge1 hoge1</p><img src="A.jpg" alt="" /></div>
</li>
<li><a href="#fuga">menu2</a>
<div><p>fuga2 fuga2</p><img src="B.jpg" alt="" /></div>
</li>
<li><a href="#piyo">menu3</a>
<div><p>piyo3 piyo3</p><img src="C.jpg" alt="" /></div>
</li>
</ul>
</nav>

<div style="height:400px; background-color:#FFC;">
main content
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ご返答、ありがとうございます。

やはり予め2種類のボタンを用意し、
マウスオーバーでそのまま変更したほうが容易ですよね。
記載して頂いた方法でも出来ました!
まだまだ初心者で、あれやこれやといろいろ試しているような状態です。
大変勉強になりました。
ありがとうございます!!

お礼日時:2017/10/03 15:51

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング