Question

我有一个无序列表，其中有一些项目会导致我在悬停时显示另一个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>

的javascript

$(function(){
$('.dotdiv li').hover(function(){
    $('.info-' + $(this).attr('id').replace('li','')).show();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');

},function(){
    $('.info-' + $(this).attr('id').replace('li','')).hide();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');
});
});

现在，当我将鼠标悬停在项目1,2，......上时，它会显示出来，当我将鼠标悬停在该项目上时，仍然会像我想要的那样停留在那里。但是现在如果我回去尝试显示任何项目，那么最后一项只能看到。因此，我猜我需要更新我的脚本，并确保无论您悬停的项目顺序如何都能正常运行。

更新

这是jsfiddle http://fiddle.jshell.net/7QmR5/

Answer 1

您可以按如下方式格式化元素

HTML

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

允许您执行以下操作

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

小提琴here

Answer 2

如果您不想修改html：

$('#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();   
    }
)

}）;

为每个列表项添加当前状态

2 个答案: