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>

当您将鼠标悬停在其中一个项目上时，会显示一个窗口，其中包含有关该项目的一些信息。我已经为一个项目解决了这个问题，现在我想知道如何让这个项目适用于整个列表。

我最初的想法是为每个项目创建一个脚本......但考虑到 js 的功能，这似乎有点厚。

Javascript

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

});

现在我需要以下内容。一旦悬停时显示“窗口”，我需要窗口以某种方式保持打开状态，以便我能够使用鼠标滚动浏览内容。这主要是因为我里面有一些链接，需要访问它们！现在，只要我离开 li 项目，窗口当然会消失......这并不好玩。那么，我该如何解决呢？

4

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 回答