他の子/親/兄弟以外の要素にマウスを乗せたときに要素を非表示にするのに助けが必要

私は初心者で、javascriptに関しては別のクラスにマウスポインタを置いたときにクラスを隠すスクリプトを作成しようとしています。私はこのコードを書いていますが、私はそれが欲しいと思っているように動作しません。誰かが私にこのコードがうまくいかない理由と結果を得るためのアドバイスを教えてくれますか？探しています。他の子/親/兄弟以外の要素にマウスを乗せたときに要素を非表示にするのに助けが必要

$(document).ready(function() { 
    "use strict"; 
    document.getElementsByClassName('nav-bar').onmouseover = function(){ 

      document.getElementsByClassName('site-title').style.display="none"; 
    }; 

    document.getElementsByClassName('nav-bar').onmouseout = function(){ 

      document.getElementsByClassName('site-title').style.display="inline"; 
    }; 

});

編集

@Jonas

$(document).ready(function() { 
"use strict"; 
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){ 
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";} 
    ); 
    }; 
} 
); 

document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseout = function(){ 
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="inline";}); 
};}); 

});

これはあなたの適応コードです。なぜ私はそれを正しく行っていないのか分からないのですか？

編集2

<body> 
<Header> 

<div class="navigation-wrap"> 
    <div class="logo"><img src="../images/logo2.jpg" alt="Lewis Banks Logo" title="Lewis Banks & Sons Ltd"></div> 

    <div class="navigation"> 
     <nav class="nav-menu"> 

      <ul class="clearfix" > 
       <li class="nav-button"><a class="nav-bar" href="../index.html">Home</a></li> 
       <li class="nav-button"> 
       <a id="product-button">Products</a> 






       <ul id="product-list"> 
        <li class="menu-dropdown2"><a href="../AC-Products.html" title="Centrifugal Switches"> AC</a> 
         <ul id="AC-sublist"> 

          <li class="dropdown-content"><a href="../CSW1-Switch.html">CSW1 Switch (15mm)<a> 
          </li> 

          <li class="dropdown-content"><a href="../CSW2-Switch.html">CSW2 Switch (20mm)<a> 
          </li> 

          <li class="dropdown-content"><a href="../CSW10-Switch.html">CSW10 Switch (30mm)<a> 
          </li> 



         </ul> 
        </li> 
        <li class="menu-dropdown2"><a href="../DC-Products.html" >DC</a> 
         <ul id="DC-sublist"> 
           <li class="dropdown-content"><a href="../Cartridge-Brush-Holders.html">Cartridge Brush Holders<a> 
           </li> 

           <li class="dropdown-content"><a href="../Brush-Holder-Caps.html">Brush Holder Caps</a> 
           </li> 

           <li class="dropdown-content"><a href="../Extruded-Brush-Holders.html">Extruded Brush Holders</a> 
           </li> 

           <li class="dropdown-content"><a href="../Pressed-Brass-Brush-Holders.html">Pressed Brass Brush Holders</a></li> 


           <li class="dropdown-content"><a  href="../Aluminium-Brush-Rockers.html">Aluminium Brush Rockers</a> 
           </li> 

           <li class="dropdown-content"><a href="../Pressed-Brass-Brush-Rockers.html">Pressed Brass Brush Rockers</a></li> 


           <li class="dropdown-content"><a href="../Tachometer-Brush-Rockers.html">Tachometer Brush Rocker</a> 
           </li> 

           <li class="dropdown-content"><a href="../Carbon-Brushes.html">Carbon Brushes</a> 
           </li> 

           <li class="dropdown-content"><a href="../Constant-Force-Springs.html">Constant Force Springs</a> 
           </li> 

         </ul> 
        </li> 
       </ul> 



      </li> 

       <li class="nav-button"><a class="nav-bar" href="../Applications.html">Applications</a></li> 
       <li class="nav-button"><a class="nav-bar" href="../Old-and-New.html">Old & New</a></li> 
       <li class="nav-button"><a class="nav-bar" href="../About-Us.html">About Us</a></li> 


      </ul> 





     </nav> 



    </div> 


</div>  




</Header> 


<div class="site-title"> 
     <h1>Lewis Banks & Sons</h1> 
     <h3><q>Labor Omnibus Unus</q></h3> 
     <h4><i>Company motto since 1916</i></h4> 
    </div> 
</body>

これは私のhtmlコードで、私はそれがこの中で混乱状態のための高度に謝罪することは、私が今までに作るためにしようとした最初のウェブサイトであると私はやっていたです私が立ち往生したときに多くの試行錯誤や絶望の他の行為。

私はサブメニューを持つトップメニューバーを持っています。私はそれをCSSを使ってやっていました。

私が持っている問題は、ページタイトルを醜く見せるサイトタイトルと重複するサブメニューにカーソルを合わせることです。サイトのタイトルを下に移動したくないので、最初のメニューボタンの上にマウスを置いたときに削除する必要があります。私はページの構造を維持しながらこれをしたいと思う（つまり、そこには何かがあった空白がある）。

出典

2017-01-31 Peter

今、あなたはあなたのJavaScriptを持っていて、さらに一歩進み、人々はあなたが取得している正確に何を見ることができるようにコードスニペットにあなたのjavascript/cssの/ HTMLを置くことができるhtmlのこと。 https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ –

jQueryを使用しているようです。なぜあなたの目標を達成するためにjQueryセレクターとメソッドを使用しないのですか？読んで理解する方が簡単です。詳細については、以下のページを見てみましょう：

例えば、これを試してみてください：

$(document).ready(function() { 
    $(document).on('mouseover', '.nav-bar', function() { 
     jQuery('.site-title').css('display', 'none'); 
    }); 
    $(document).on('mouseout', '.nav-bar', function() { 
     jQuery('.site-title').css('display', 'inline-block'); 
    }); 
});

出典

2017-01-31 15:53:37 Dais

よろしくお願いします。 – Peter

のgetElementsByClassNameはHTMLCollectionを返します。あなたがloopover、それぞれに追加する必要があります。

document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){ 
    document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";}); 
};});

出典

2017-01-31 15:55:03

このコードは動作しませんでした。「=> 'と何か関係があります。 – Peter

@SylvesterPeter WHY ?? –

それは私が欲しいと言った6 – Peter

同様高座では、jQueryのを使用しているようにjQueryで構築されたマウスイベントを使用しないで、なぜそれはそう見え、彼の答えで述べました。どちらかまたはあなたのどこかからあなたのコードをコピーし、$がjQueryのためのショートカットであり、あなたのjQueryを動作させるためにjQueryをインクルードする必要があることを認識していませんでした。 jQueryを組み込むには、htmlに以下のような文が必要です。これにはGoogleのコンテンツ配信ネットワーク（CDN）のjQueryが含まれます。 jQueryから直接入手できるCDNもあります。以下は

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://api.jquery.com/category/events/mouse-events/

jQueryのイベントやセレクターを使用して実施例です。

$(document).ready(function() { 
 
    "use strict"; 
 
    $('#site-title').mouseover(function() { 
 
    $('#site-title').hide(500); 
 
    }); 
 

 
    $('#nav-bar').mouseleave(function() { 
 
    $('#site-title').show(500); 
 
    }); 
 
});

#site-title { 
 
    position:absolute; 
 
    background:red; 
 
    width:100%; 
 
    height:50px; 
 
} 
 

 
#nav-bar { 
 
    position:absolute; 
 
    background:green; 
 
    width:100%; 
 
    height:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav-bar">I am the nav bar 
 
    <button>Nav1</button> 
 
    <button>Nav2</button> 
 
    <button>Nav3</button> 
 
</nav> 
 
<header id="site-title">I am the site title</header>

出典

2017-01-31 16:14:39

ありがとうあなたの応答のために。私はhtmlのheadタグにjqueryを含めて、自分自身と@Daisコードを自分のものに合わせて適応させましたが、まだ動作の兆候を見せていません。 nav barクラスは実際にはバー全体を参照するのではなく、個々のボタンを参照するので、私は混乱を避けるためにナビゲーションボタンに変更したので、今度はクラスにしました。しかし、site-titleをidに変更する必要があります。ヘッダータグを使用する際の問題は、タイトルの3つの部分が異なるスタイルになっているので、私のsite-title divがコンテナのように機能することです。 – Peter

@SylvesterPeterナビゲーションバーにボタンを含むようにコードスニペットを更新しました。あなたが言ったように、個々のコンポーネントではなく、コンテナに基づいてイベントを処理できます。あなたは、ヘッダー要素の内部にあなたのサイトタイトルhtmlのすべてを持つことができます。それはdivとほとんど同じように動作しますが、意図をより良く伝えます。また、nav要素にあなたのnavコンポーネントをラップすることで、より多くのブラウザに組み込まれているいくつかのユーザビリティ機能に加えて、intentをより良く伝えます。 –

私はhtmlコードのスニペットを追加しました。あなたは、私が何をしようとしているのかを理解することができるので、li要素内のnav要素を入れ子にすることを提案しますか？ – Peter

他の子/親/兄弟以外の要素にマウスを乗せたときに要素を非表示にするのに助けが必要

答えて

関連する問題