Question

我有一个看起来像这样的无序列表

HTML

<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 a').hover(function(){
          $('#info-1').show();
     },function(){
          $('#info-1').hide();
     });
});

所以我的问题当然是，如何让这个脚本适用于所有项目。

Answer 1

我建议：

$('#pop li').hover(
    function() {
        $('div.info').eq($(this).index()).show();
    }, function() {
        $('div.info').eq($(this).index()).hide();
    });

使用略微更改的HTML：

<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>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>

JS Fiddle demo

我忘了说这将显示与当前悬停的.info元素相同的index li元素，因此首先将悬停在上 li将显示第一个.info，依此类推。因此，它依赖于在li和.info元素之间保持可预测的关系。

顺便说一下，只使用CSS就可以复制这种交互，虽然它需要点击而不是悬停事件，只要你修改li HTML包含指向相关id的{{1}}的链接：

div

CSS：

<div id="pop"> <ul> <li><a href="#info1">Item 1</a></li> <li><a href="#info2">Item 2</a></li> <li><a href="#info3">Item 3</a></li> <li><a href="#info4">Item 4</a></li> <li><a href="#info5">Item 5</a></li> <li><a href="#info6">Item 6</a></li> <li><a href="#info7">Item 7</a></li> </ul> </div> <div class="info" id="info1"></div> <div class="info" id="info2"></div> <div class="info" id="info3"></div> <div class="info" id="info4"></div> <div class="info" id="info5"></div> <div class="info" id="info6"></div> <div class="info" id="info7"></div>

JS Fiddle demo。

顺便提一下，引用属性是可选的（但如果它是包含空格的属性，必须引用），但如果引用则必须引用两个引用值的引用：[{1}} 不有效HTML（因为字符串不会关闭，直到下一个属性的开头的下一行）;使用：.info { /* hides by default */ display: none; } .info:target { /* shows when targeted */ display: block; }。

而且，你发布的jQuery：

<div id="info-1></div>

这不起作用，因为：

选择器不匹配任何元素，您尝试定位<div id="info-1"></div>元素内的$(function(){ $('pop a').hover(function(){ $('#info-1').show(); },function(){ $('#info-1').hide(); }); });元素（显然，它不存在）。您需要做的是在a前加上pop（正如您在下一行中所做的那样，我假设在那里输入错误），给予：id。但是，
#元素中没有$('#pop a')个元素，因此不会绑定任何事件。

但是，如果您需要使用该表单，那么可以通过一些调整来实现它：

JS Fiddle demo

参考文献：

Answer 2

试试这个：

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

Answer 3

你已经在pop元素内的所有a标签上绑定了一个悬停事件（虽然你有语法错误，你应该总是在通过id寻址一个元素时添加'＃'）你没有它们你在寻找的是：

$('#pop li').hover(function() {

});

Answer 4

以下是示例http://fiddle.jshell.net/7QmR5/

<强> HTML：

<div id="pop">
    <ul>
        <li id="li1">Item 1</li>
        <li id="li2">Item 2</li>
        <li id="li3">Item 3</li>
    </ul>
</div>

<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>

<强> JavaScript的：

$(function(){
    $('#pop li').hover(function(){
        $('#info-' + $(this).attr('id').replace('li','')).show();
    },function(){
        $('#info-' + $(this).attr('id').replace('li','')).hide();
    });
});

Answer 5

我有一个更简单的解决方案：

CSS

#info-1{
    display:none;
}
ul > li:hover #info-1 {
    display:block;
}

给li元素一个id会更容易使用CSS选择它们，除非你想使用伪我相信它被调用。

如果需要，可以使用jQuery：

$('li:eq[0]','#pop').hover(function(){
    $('info-1').show();
});

在悬停时显示和隐藏列表项

5 个答案: