javascript - 別のdivのonmouseover関数を作成する

Question

了解しました。これをできるだけ明確にしようと思います。親切にしてください、私はJavaScriptにとても慣れていません。

私はnavと呼ばれるdivコンテナを持っています。これは、5つのナビゲーションボタンを保持し、それらはすべて並べてフロートされています。そのコンテナの下に、underbarと呼ばれるdivコンテナがあります。これは、各nav要素の下にある単色のバーです。誰かがナビゲーションdivにカーソルを合わせると、その要素のアンダーバーの色が変わります。今、私はあなたが下に見るものを持っています、そしてそれは正しく働いています。

<div id="container">
<div id="nav">
<div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"><a href="one.html">One</a>    </div><!-- end of first nav -->
<div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"><a href="two.html">Two</div><!-- end of second nav -->
<div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"><a href="three.html">Three</div><!-- end of third nav -->
<div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"><a href="four.html">Four</div><!-- end of fourth nav -->
<div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"><a href="five.html">Five</div><!-- end of fifth nav -->
</div><!-- end of nav div -->

<div id="underbar">
<div id="ubone"></div><!-- end of first nav -->
<div id="ubtwo"></div><!-- end of second nav -->
<div id="ubthree"></div><!-- end of third nav -->
<div id="ubfour"></div><!-- end of fourth nav -->
<div id="ubfive"></div><!-- end of fifth nav -->
</div><!-- end of underbar div -->

</div><!-- end of container div-->

はい、これは問題なく動作します。しかし、私はこれらを1つずつ編集しなければならないという考えは絶対に嫌いです。複数のdivIDに対して実行できる一方で、javascript関数/ jquery（できれば）を使用してこれを単純化する最も簡単な方法は何ですか？考え/意見？ありがとう！

score 4 · Accepted Answer

これdivは、要素の直接の子である'を対象としています#nav。

$(document).ready(function(){
    $('#nav > div').mouseover(function(){

        $('#ub' + this.id).css('backgroundColor', 'grey');

    }).mouseout(function(){

        $('#ub' + this.id).css('backgroundColor', 'white');

    });
});

純粋なJavascriptソリューションが必要な場合は、次のことを試してください。

window.onload = function(){

    var elements = document.querySelectorAll('#nav > div');

    for(var i=0; i<elements.length; i++)
    {
        elements[i].onmouseover = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'grey';
        };
        elements[i].onmouseout = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'white';
        };
    }
}

score 2 · Accepted Answer

動作中のデモでの答えは次のとおりです。

http://jsfiddle.net/AVk6k/1/

代わりに jQuery.hover()を使用します。は、1つのハンドラーに.hover()結合する速記のようなものです。.mouseenter().mouseleave()

IMHOは、ちらつきがちなmouseenterやmouseleaveよりもはるかに信頼性がmouseoverあります。mouseout

jQuery：

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});

また、いくつかの</a>タグがありませんでした。

HTML：

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></div><!-- end of fifth nav -->
    </div><!-- end of nav div -->
    <div id="underbar"> 
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->   
    </div><!-- end of underbar div -->   
</div><!-- end of container div-->

score 2 · Accepted Answer

$(".myClass").mouseover(function() {
    $('#ub' + this.id).css('background-color', 'gray');
  }).mouseout(function(){
     $('#ub' + this.id).css('background-color', 'white');
  });

score 1 · Accepted Answer

提供されるすべてのソリューションは、jQueryを使用して目的を達成します。プレーンなJavascript（はるかに高速）を使用して、次のアプローチを使用します。

<script type="text/javascript">
function hoverMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='gray';
}

function blurMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='white';
}
</script>

<div id="container">
    <div id="nav">
        <div id="one" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="one.html">One</a>    </div><!-- end of first nav -->
        <div id="two" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="two.html">Two</div><!-- end of second nav -->
        <div id="three" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="three.html">Three</div><!-- end of third nav -->
        <div id="four" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="four.html">Four</div><!-- end of fourth nav -->
        <div id="five" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="five.html">Five</div><!-- end of fifth nav -->
    </div><!-- end of nav div -->

    <div id="underbar">
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->
    </div><!-- end of underbar div -->
</div><!-- end of container div-->

score 0 · Accepted Answer

$("#nav").on("mouseover", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'gray');
}).on("mouseout", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'white');
});

score 0 · Accepted Answer

編集：質問を読み間違えました。これが私の修正された答えです。

より意味的に正しいマークアップを提案します。ナビゲーションは事実上リンクのリストであるため、一般的には次のようにスタイルを設定するのが標準的な方法です。

<ul id="nav">
  <li rel="#ubone"><a href="mypage1.html">One</a><li>
  <li rel="#ubtwo"><a href="mypage2.html">Two</a><li>
  <li rel="#ubthree"><a href="mypage3.html">Three</a><li>
  <li rel="#ubfour"><a href="mypage4.html">Four</a><li>
</ul>

これには、デフォルトのリストスタイルを削除するために少し余分なスタイルが必要ですが、Google Webクローラーにとってより意味のあるナビゲーションになり、適切なコーディング慣行に従います。疑わしい場合は、cssの開始点を次に示します。

#nav {margin:0; padding:0;}
#nav li {list-style:none; float:left; padding:5px 10px; background:#FFF;}
#nav a {color:#000; text-decoration:none;}

元の質問に答えるには、次のようにjQueryを使用して動作を追加できます。

$(document).ready(function(){
  // The document ready waits for the document to load before adding JS to the elements
  // We use the css selector for our element to select it, then use the hover function to apply a behaviour
  $('#nav li').hover(function(){
    // This function executes when the mouse hovers over the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#ccc'
    });
  }, function(){
    // This function executes when the mouse leaves the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#fff'
    });        
  });
});

jQueryについてさらにサポートが必要な場合は、http：//api.jquery.com/にアクセスしてください。ここには、優れた詳細なドキュメントがあります。

注意-適用している実際のスタイルがわからない場合はわかりませんが、下の境界線を追加し、「：hover」css疑似クラスを使用してホバー時に色を変更することでアンダーバーを実現できるようです。。

javascript - 別のdivのonmouseover関数を作成する

6 に答える 6

Related

Reference