Question

 <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项目时，窗口当然会消失......这不好玩。那么，我该如何解决呢？

Answer 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();
});

jquery悬停打开关闭微型窗口

1 个答案: