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

我有一张这样的无序列表

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>

---

因此，我的问题当然是，如何使此脚本适用于所有项目。

您已经在pop元素内的所有

a

标记上绑定了一个悬停事件（尽管您有语法错误，但在按id寻址元素时，您应该始终添加“#”），而您没有这些悬停事件 你要找的是：

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

});

试试这个：

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

我建议：

$('#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>​

和CSS：

.info {
    /* hides by default */
    display: none;
}

.info:target {
    /* shows when targeted */
    display: block;
}

。​

---

顺便说一句，引用属性是可选的（虽然如果属性包含空格，则必须将其引用），但如果引用，则必须在引用的值的两端都有一个引号：

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

CSS

给li元素一个id将使使用CSS选择它们变得更容易，除非你想使用pseudo，我相信它是被调用的

或者jQuery（如果需要）：

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

这是样品

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>

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

以后，请尝试缩进您的代码；它使它更具可读性。：）+1.你到底是怎么这么快就把参考文献编成清单的！？阿萨德，那是因为他是个忍者。另外，我更喜欢这种方法，而不是有数据弹出窗口的方法，尽管你必须确保你的事情井然有序。我…嗯，练习？老实说，jQuery引用并不难，因为它总是一个可预测的URL:
http://api.jquery.com/“+methodName+”/“
但是，当涉及到可靠的普通JavaScript引用时，您应该看到失败的Google fu。唉，我真希望这本书能有一个类似的可预测（和明显的）参考资料@David Thomas我喜欢你的两个想法，但我相信如果你将选择器修改为
$（$（this）.children（“a”）.attr（“href”）
，那么第二个想法并不局限于点击事件。我想为了保持
悬停在
上，你可以将悬停函数改为查看
a
s。您意识到您的CSS版本无法工作，因为
div
元素不在
li
元素中。jQuery将只显示元素，不会再次隐藏它们。另外，还有一个语法错误，应该是：
li:eq（0）
（括号，而不是括号）。而且，即使更正了，OP也需要为每个
li
元素设置单独的事件处理程序。然后是上下文，它会起作用，是的，但是当使用
$（'#pop li'）
更容易时，为什么要这样做呢？它不使用
find（）
（内部），而是使用浏览器的
queryselectoral（）
来加快速度。@davidthoma我很遗憾，我错过了sytax错误。使用选择器$（'#pop li'）将在每个
元素的每次悬停时触发。我确定测验者希望
中的每个
元素都有一个唯一的选择器。（例如：li:eq（0）->show#info-1，li:eq（1）->show#info-2）。我从来都不知道CSS选择器不会工作，因为我没有要求查找子元素'>'。如何仅使用CSS显示元素#info-1？
$(function(){
     $('#pop li').hover(function(){
          $('#info-' + $(this).text().match(/(\d+)/)).show();
     },function(){
          $('#info-' + $(this).text().match(/(\d+)/)).hide();
     });
});

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

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

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

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