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の理解が浅いようであまり効率の良いコードが書けない上に、期待通りの動作をしません。教えて下さい。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。