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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1714閲覧

<title>によってmouseoverした時のcssを変える

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2015/11/22 04:22

編集2015/11/22 04:23

html

1<title>home</title> 2<div"> 3 <ul class="main-menu"> 4 <li data-page="home"><a href="#" alt="home">ホーム</a></li> 5 <li data-page="comment"><a href="#" alt="comment">コメント</a></li> 6 <li data-page="comunity"><a href="#" alt="comu">コミュニティ</a></li> 7</div>

javascript

1var titleName = document.title; 2 var MainMenu = document.querySelector('.main-menu'); 3 var MainMenuChild = MainMenu.children; 4 5 for(var i=0; i < MainMenuChild.length; i++){ 6 7 //読み込んだページに対応した要素のスタイル変更 例)homeだったらdata-page="home"を変更 8 if(titleName.indexOf(MainMenuChild[i].getAttribute('data-page')) != -1){ 9 MainMenuChild[i].style.backgroundColor = '#bb3d41'; 10 MainMenuChild[i].style.color = '#ffffff'; 11 } 12 13 //ホバーした要素のスタイル変更 14 MainMenuChild[i].addEventListener('mouseover', function(event){ 15 var li = event.target; 16 li.style.backgroundColor = '#bb3d41'; 17 li.style.color = '#ffffff' 18 }); 19 20 //ホバーアウトした要素のスタイル変更 21 MainMenuChild[i].addEventListener('mouseout', function(event){ 22 var li = event.target; 23 24 alert(li.getAttribute('data-page')); 25 26 //消さない場合のフィルター 27 if(titleName.indexOf(li.getAttribute('data-page')) == -1){ 28 li.style.backgroundColor = '#ffffff'; 29 li.style.color = '#444444' 30 } 31 }); 32 }

読み込んだ<title>の値と、ホバーした<li>のdata-pageの値をindexOfで比較して、cssを変更するコードを書いています。

mouseoverのイベント内処理は上手く動作するのですが、
mouseoutのイベント内処理が上手くいきません。
まず、mouseoverで変更した背景をtitleName以外なら元に戻し(背景を白)、titleNameと同じdata-pageであれば戻さない。という処理を書いています。
つまり、簡単に説明すると現在いるページのメニューはホバーさせたままの状態にしておきたいのです。

//消さない場合のフィルター部分で、
alert(li.getAttribute('data-page'));でmouseoutした要素のdata-pageを見たいのですが、nullになってしまい困っています。

scriptの理解が浅いようであまり効率の良いコードが書けない上に、期待通りの動作をしません。教えて下さい。よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

hover 的動作のようなので CSS で実現してみてはどうでしょうか。

HTML

1<title>home</title> 2<style> 3.current, .main-menu>li>a:hover { 4 background-color: #bb3d41; 5 color: #ffffff; 6} 7</style> 8</head> 9<body> 10 11<div> 12 <ul class="main-menu"> 13 <li data-page="home"><a href="#" alt="home">ホーム</a></li> 14 <li data-page="comment"><a href="#" alt="comment">コメント</a></li> 15 <li data-page="comunity"><a href="#" alt="comu">コミュニティ</a></li> 16 </ul> 17</div> 18 19<script> 20'use strict'; 21(function () { 22 var a = document.querySelector('.main-menu>li[data-page="' + document.title.replace(/\u0022/g, '\\022') + '"]>a'); 23 24 if (a) { 25 a.classList.add('current'); 26 } 27}()); 28</script>

var li = event.target;

event.targeta 要素ノードになる気がします。

Re: morikzさん

投稿2015/11/23 01:57

think49

総合スコア18156

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

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

0

javascript

1var li = event.currentTarget;

と変更するとどうなりますか?

参考
event.curretTargetとevent.targetの違い - gsol-dev's blog

投稿2015/11/22 04:49

Lhankor_Mhy

総合スコア35865

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

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

退会済みユーザー

退会済みユーザー

2015/11/22 13:31

変更しても、ホバーした後スタイルを元に戻せないので、解決できません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問