Javascript 向每个列表项添加当前状态

我有一个无序的列表，其中包含一些导致我在悬停中显示的另一个div的项目

html

<div class="dotdiv">
  <ul>
    <li>Item</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

   <div class="info-1"></div>
   <div class="info-2"></div>
   <div class="info-3"></div>
</div>

现在当我把鼠标悬停在项目1，2。。。它会显示出来，当我将鼠标悬停在外时，该项目仍会像我希望的那样保持在那里。但是现在，如果我返回并尝试显示任何项目，最后一个项目是唯一可见的。因此，我猜我需要更新我的脚本，并确保无论您悬停在上面的项目的顺序如何，它都能正常工作

更新

---

这是JSFIDLE文件，您可以按如下方式格式化元素

HTML

---

如果不想修改html，请使用Fiddle：

$('#pop li').each(function(i, el){
$(this).hover(
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
    },
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();   
    }
)

---

}))

该html与您显示的代码不匹配，

.dotdiv

元素没有任何

li

子元素，

li

元素没有

id

属性。以

info-

开头的

id

元素在哪里，在每个函数的第二行设置了CSS？你能纠正这一点，或者在？上设置一个演示吗？这里仍然不起作用-就像@nnnn说的，你能在mouseout处理程序中发布一个JSFiddle吗？为什么你要调用

.hide（）

，然后调用

css（'display'，'block'）在同一元素上<代码>块

将再次取消隐藏它。此外，更新的html仍然没有ID，因此它仍然不能与您的真实代码相同…@nnnnnn请给我一分钟时间，我正在为它设置JSFIDLE。请查看我的更新…当您将鼠标移出时，它将消失。。。我想添加一个当前状态。。。因此，无论最后一个悬停在哪个项目上，都应该displayed@DinoExcel更新了我的示例。只是不要隐藏悬停时的div。@DinoExcel抱歉更新了我的示例，使div最初处于隐藏状态。我真的不明白为什么要重写我的整个代码，如果有一个额外的div包含>div指示符，就用一个不起作用的代码替换它。。。不太好的解决方案words@DinoExcel我只能回答向我提出的问题，根据你的问题，我的解决办法奏效了。如果你用新的结构更新你的问题，我将非常乐意改变我的答案。

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

$(".dotdiv > ul > li").hover( function( ) {
    $(".dotdiv > div").hide();
    $("#info-" + $(this).attr("id") ).show();
});

$('#pop li').each(function(i, el){
$(this).hover(
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
    },
    function(){
       $("[id^='info']").eq(i).show().siblings("[id^='info']").hide();   
    }
)