0 
 <div id="pop">
 <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
 </ul>
 </div>
 <div id="info-1></div>
 <div id="info-2></div>

また、アイテムの1つにカーソルを合わせると、そのアイテムに関する情報を示すウィンドウが表示されます。私はこれを1つの項目で解決しましたが、リスト全体でこれを機能させる方法を知りたいと思います。

私の最初の考えは、アイテムごとに1つのスクリプトを作成することでした...しかし、jsの機能を考えると、それは少し厚いようです。

Javascript

 $(function(){
 $('pop il li').hover(function(){
      $('#info-1').show();
 },function(){
      $('#info-1').hide();
 });

}）;

今、私は以下が必要です。「ウィンドウ」がホバーに表示されたら、マウスを使用してコンテンツをスクロールできるように、何らかの方法でウィンドウを開いたままにしておく必要があります。これは主に、内部にいくつかのリンクがあり、それらにアクセスする必要があるためです。今、liアイテムを離れると、もちろんウィンドウが消えます...これは面白くありません。だから、どうすればそれを解決できますか？

4

1 に答える 1

1

更新しました

これらに必要なアクションを処理する関数を1つ作成します。'info'divが'pop'liと同じ順序であることを確認してください

これがFIDDLEの例です

<div id="pop">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
</div>

<div class="info"></div>
<div class="info"></div>
<div class="info"></div>

次に、このjqueryを使用します

$('#pop li').mouseover(function() {
    $('.info').hide();
    var x = $(this).index();
    $('.info').eq(x).show();
});

$('.info').mouseout(function(){
    $(this).hide();
});
于 2012-11-24T23:54:38.473 に答える