-1

ブロック/非表示間の表示の切り替えは機能するのに、jQuery の表示/非表示が機能しないのはなぜですか?

Javascript:

<div style="width: 100px; height: 100px; background-color: red;"
     onmouseover="document.getElementById('div1').style.display = 'block';" 
     onmouseout="document.getElementById('div1').style.display = 'none';">
   <div id="div1" style="display: none;">Text</div>
</div>

jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div style="width: 100px; height: 100px; background-color: red;" 
     onmouseover="$('#div1').show();" onmouseout="$('#div1').hide();">
   <div id="div1" style="display: none;">Text</div>
</div>
4

3 に答える 3

0

jquery の使用をお勧めし、CSS (デザイン)、html (マークアップ)、javascript (インタラクション) を常に分離するようにしてください。将来、jQuery などのフレームワークを使用する際の問題を回避できます。

次のコードは、jquery で mouseover を使用する例です。

$(document).ready(function() { //starts after all html is loaded (after dom is loaded)
  $('#div1').hide();
  $("div.container").mouseover(function() {
    $('#div1').show();
  }).mouseout(function(){
    $('#div1').hide();
  });
});

スタイリングに CSS を使用します。

.container {
  width: 100px; height: 100px; background-color: red;
}

その結果、html は意味的に正しいものになります。

<div class="container">
   <div id="div1">Text</div>
</div>
于 2013-01-05T04:39:14.093 に答える
0

親 div がコード内の最初の div である場合、$('div:first')親のように id を使用または指定できます。

<script>
    $(function(){
     $('#div1').hide();
     $('div#Parent').hover(function(){
     $('#div1').toggle();
     });
    });
</script>


<div id="Parent" style="width: 100px; height: 100px; background-color: red;">
   <div id="div1">Text</div>
</div>

必要なイベントと同等のコードを使用hover()しtoggle()て簡潔にします。

于 2013-01-05T05:02:19.950 に答える
0

どちらも同じように動作するようです:

https://tinker.io/62ecc/1

ローカル ファイルでテストしている場合、ブラウザはデフォルトfileでsrc. 開発者ツールを使用して、スクリプトの応答コードを確認します。

于 2013-01-05T04:40:34.243 に答える