質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4366閲覧

マウスロールオーバーでの反応範囲がそれぞれ違う場合の書き方

enokiyo

総合スコア78

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/08/06 06:18

編集2015/08/06 06:22

マウスがある矩形領域(クリッカブルエリア)にロールオーバーした時にある要素が表示されます。

表示された要素はクリッカブルにしている矩形領域の隣に表示されます。

矩形領域と表示された要素からロールアウトしたら、表示した要素を消します。

※表示要素の中にはリンクボタンがあります。

このような場合、
js,css,htmlクリッカブルをどう実装したらよいかなと悩んでいます。
jqueryはOKです。

良いアイデアありますか?

質問の意図としては
・hoverでの表示はクリッカブルエリア
・消える判定はクリッカブルエリア+表示された要素
(四角の要素が隣に表示されるので吹き出しっぽい判定になります)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

削除済み

投稿2015/08/06 14:17

編集2015/08/08 17:47
enokiyo

総合スコア78

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

enokiyo

2015/08/08 04:49

マイナスは良くないことだと教えていただきましたので、自己解決を投稿すると自動的に付与されるベストアンサーを外しました! 文章が下手なので本当に困った時以外は使用を控えますね。
guest

0

ベストアンサー

マウスオーバーする要素内に、マウスオーバー時に表示する要素を仕込んでおき、該当要素にマウスオーバーした際にそれを出現させるだけで達成できるかと思いますが、それはすでに試してみましたか?

<div id="target"> <p>Mouse over area</p> <p style="dipslay: none;">Additional Area</p> </div>

#targetにマウスオーバーしたらdisplay: noneになってる要素を出現させるイメージです。

投稿2015/08/06 06:40

edo_m18

総合スコア2283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

enokiyo

2015/08/06 07:21

試してみましたが、だめでした。
edo_m18

2015/08/06 08:46

ダメというのは、どういう状態になりましたか? あと、jsdo.itのようなHMTL/CSS/JSを書いてそれをシェアするサービスがあるので、そういうのに現状のものを書いて提示してもらうとよりよい回答がつけられると思います。
enokiyo

2015/08/06 11:31

画像にクリッカブルが複数設定してあります。 そこにロールオーバーするとその画像の上に重ねて対応するコンテンツが表示されるという仕組みになっております。 ですので上記の方法では無理でした。
gyojin

2015/08/06 14:30 編集

お話から想像するにイベントバブリングを起こしているのかもしれません。 http://uhyohyo.net/javascript/3_6.html edo_m18さんの言われるようにjsdo.itのようなところに投稿するか こちらでも最低css含むソースが無いと間違いの虱潰しになってしまい ちょっと対応が難しいような気がします
enokiyo

2015/08/08 04:25

jsdo.itの件 了解いたしました!。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問