![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんばんは。
いま、下記サイトでのソースをつかわせていただき、ドロップダウン
メニューを作成しています。
http://jsajax.com/DropDownMenuArticle286.aspx
ジャバスクリプトのわからない自分でも作るところまでは
できました。
今回、教えていただきたいのはドロップするメニューの元になる
画像または、文字の選択状態についての質問です。
横に並べたグローバルナビゲーション等にカーソルがのると
ドロップしメニューがでてくるのですが、そのドロップしたメニューに
カーソルを合わせるとドロップ元の画像の選択状態が解除されてしまい
ます。
ドロップしたメニューにカーソルがのっている間もドロップ元の
画像やテキストをオーバーした状態でたもちたいのですが
どうすればいいかわかりません。
CSSであたり判定の制御等は難しいとおもうので、ジャバスクリプト
側での制御になるのではないかとおもうのですが。。。
制御方法または、参考になるようなページ等知っておられる方
おられましたら、お教えいただけませんでしょうか。
よろしくおねがいします。
No.2ベストアンサー
- 回答日時:
・ DropDownMenu.js を次のように変更してください。
------------------------------------------------------------
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Konstantin Jagello | http://javascript-array.com/ */
var TimeOut = 300;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;
var mmenu;
function mopen(n) {
var l = document.getElementById("menu" + n);
var mm = document.getElementById("mmenu" + n);
mmenu = mm;
if(l) {
mcancelclosetime();
l.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = l;
currentitem = mm;
currentLayerNum = n;
} else if(currentLayer) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}
function mclosetime() {
closeTimer = window.setTimeout(mclose, TimeOut);
mmenu.style.backgroundColor = "#5970B2";
}
function mcancelclosetime() {
if(closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
mmenu.style.backgroundColor = "#49A3FF";
}
function mclose() {
if(currentLayer && noClose!=1) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
} else {
noClose = 0;
}
currentLayer = null;
currentitem = null;
}
document.onclick = mclose;
------------------------------------------------------------
変更下箇所は、以下の通りです。
1.
var mmenu;
2.
function mclosetime() {
closeTimer = window.setTimeout(mclose, TimeOut);
mmenu.style.backgroundColor = "#5970B2";
}
function mcancelclosetime() {
if(closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
mmenu.style.backgroundColor = "#49A3FF";
}
No.1
- 回答日時:
・ 直感的で試していませんが考え方として、テキストの場合
------------------------------------------------------------
1. mcancelclosetime() の中で
ドロップ元のテキストのbackgroundを
#dd li a.menu:hover {
background: #49A3FF;
}
と同じにする。
2. mclosetime() の中で元に戻す。
background: #5970B2;
------------------------------------------------------------
としてみてはどうでしょうか。
この回答への補足
参考ありがとうございます。
具体的にはどのように記載してみればよろしいでしょうか?
CSSはそこそこわかるのですが、javaスクリプトの記載方法が
わからないです。
お手数ですがお教えいただけますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- フリーソフト アイコンとして保存アプリが不調 2 2022/04/16 06:39
- iPad iPadでWebサイトで選択した文から「ユーザー辞書」を押しても登録画面が出ない 1 2022/08/11 19:56
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- 防犯カメラ・監視カメラ・小型カメラ Windowsのカメラ機能。設定した通りのfpsでの撮影ができず、コマ落ち動画になる。修正するには? 2 2023/01/29 09:50
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
- Chrome(クローム) サイトのショートカットアイコンの格納場所は? 1 2022/12/26 01:38
- Illustrator(イラストレーター) プロパティパネルを元に戻せますか 3 2022/05/07 16:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
この将棋プログラムに王様ゲッ...
-
google apps scriptの終了のさせ方
-
アルファベットABCD…をスマート...
-
ASP.NETのコントロールの値をJa...
-
翌月を取得するGASが分かりません
-
APIを使って埋め込んだグーグル...
-
初回訪問(アクセス)日時の取...
-
JavaScriptで文字列の特定文字...
-
VSCODE[Python]の設定について
-
二次元配列に値をセットしたい...
-
なぜmatchメソッドがエラーにな...
-
JSONPを処理するにはどうすれば...
-
javaScriptのコードの修正をお...
-
ジェネレーターの作り方
-
colorbox (オーバレイでの向き...
-
ドロップダウンメニューのドロ...
-
<a>タグのテキストを取得
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
同じIDで定義した要素の配列を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
1日1回引けるJavaScriptおみく...
-
javascriptでテーブルに追加し...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報